Video summary

웹사이트 제작의 전체 흐름 파악하기 - 웹디자인 강좌 1-2

Main summary

Key takeaways

Educational

Main ideas & concepts (website creation “big picture”)

The course explains the end-to-end process of how a website is built and continuously improved. It emphasizes understanding what matters at each stage and what designers should focus on.

Most projects follow six stages:

  1. Planning
  2. Design
  3. Development
  4. QA
  5. Deployment
  6. Operations (ongoing improvement)

Methodology / workflow presented (detailed by stage)

1) Planning

Goal: Organize the direction and scope to match the project purpose.

Planning is considered “complete” when you clearly define:

  • What you are making
  • Why you are making it
  • For whom you are making it

Key planning-related terms:

  • Requirements definition
    • A standard that organizes what needs to be made.
  • Personas
    • A fictional profile used to identify goals, context, and tasks.
    • Warning: it can be hard to keep personas objective when forming hypotheses; biased thinking can lead to personas that serve someone’s personal agenda.
  • User journey map (user-centric map)
    • Visualizes user experience flow (e.g., sign-up → browsing → purchase → reviews).
    • Identifies feedback and pain points at each stage, then uses them to guide planning.
  • User flow
    • A step-by-step diagram of which screens users visit and in what order to reach a goal.
  • Sitemap
    • Diagram of overall page structure, showing relationships and page depth.
  • Wireframe
    • Blueprint organizing screen structure and information flow without visual design details like colors/images.
    • Historically used by planners to explain structure; modern design systems may shift more structure/detail creation toward UI components.
  • UX writing
    • Writing style that designs user-facing text (buttons, notifications, instructions) to be clear and friendly.

2) Design

Goal: Design the user experience so users can understand and act naturally—not just “make it look good.”

Design-related terms:

  • Style guide
    • Document defining visual rules: colors, typography, icons, etc.
    • Basis for working consistently across future page additions/updates.
  • Prototype
    • Interaction simulation that verifies user flows by connecting actions (clicks, conversions, scrolling).
    • Note: Sigma can provide basic prototyping; practice is planned later.
  • Web accessibility
    • Design so people of different ages, disabilities, and environments can perceive, understand, and operate website information/functions.
    • Examples:
      • Color contrast
      • Keyboard-only navigation (focus shifting)
      • Correct semantic structure so screen readers read content properly
      • Clear state expression (how UI states are communicated)
    • Framed as: not only a disability requirement, but a usability principle for everyone.
  • Design system
    • A reusable framework combining:
      • components, tokens, patterns, guides
    • Difference from style guide:
      • Style guide = reference for visual standards.
      • Design system = connects design rules (colors/space/typography, etc.) through to actual implementation/code.
  • Micro-interactions
    • Small responsive interactions to user actions (e.g., button click, heart animation).
  • Web fonts
    • Fonts loaded from a server so the site can display fonts even if users don’t have them installed locally.
  • Perceived speed / Skeleton UI
    • Uses placeholders while content loads to improve perceived performance.

Designer responsibility beyond screens: handoff

Handoff is required so developers implement the design correctly. Four key handoff preparation items:

  1. Handoff consistency
    • Maintain consistency in design tokens: naming conventions, spacing, colors, typographical rules across components/layers.
    • Example: Figma variable names must map identically to CSS variable names.
  2. State definition
    • Each UI component must specify states (hover, focus, active, disabled, etc.) so developers can implement correctly.
  3. Response standards
    • Provide a draft for layout/responsive rules per breakpoint (including text/layout behavior).
    • If perfect organization is hard, send it together with explanatory text.
  4. Management of assets
    • Organize UI icon/image export details:
      • resolution
      • file format
      • file naming conventions

Emphasis: handoff should convey intent, not only final visuals.

3) Development

Goal: Implement design into real code for deployment.

It’s more than building the “shell”—it integrates components such as:

  • Databases
  • APIs

Key terms:

  • Breakpoint
    • Reference point where layout changes based on screen size.
    • CSS media queries are mentioned; from the designer perspective, naming/rule framing aligns to “tablet” and “mobile layer” for clarity.
  • API
    • Agreed communication method between front-end and back-end for data exchange.
  • Database
    • Storage location for site information (e.g., posts).
  • Logging and tracking
    • Recording user actions (clicks, conversions, submissions) so later analysis and performance measurement is possible.
  • Performance optimization
    • Manage structure/resources so the site loads quickly and runs smoothly.
    • Examples:
      • remove unnecessary graphics
      • compress images
      • optimize animations
      • too many web fonts can harm loading speed
      • reduce initial load using lazy loading (load content only as it becomes visible)

Purpose stated: poor performance frustrates users and increases churn.

4) QA (Quality Assurance)

Goal: Verify the implemented result matches design intent and works properly.

QA includes:

  • Checking visual alignment between design and implementation (the subtitles mention “design refining” and matching visuals).
  • Verifying UI states and actions work correctly.
  • Testing reactions to catch glitches/misalignment.
  • Checking web accessibility optimization.
  • Ensuring functions across stages work and reviewing errors.

Related terms:

  • Cross-browser compatibility
    • Features working correctly across different browsers and operating systems.
  • Bug report
    • Documents:
      • mitigation approach
      • environment where it occurred
      • expected vs actual results
      • the method context

5) Deployment

Goal: Make the finished site available for real users after design/dev completion.

Security terms:

  • HTTPS and SSL
    • Encrypt communications to protect user information and connection security.

Environments and operations:

  • Staging environment
    • Test server with conditions identical to production for final QA confirmation.
  • Rollback
    • Revert to a previous stable version if errors/failures occur.

Deployment “finishing work” sometimes missed (designer-facing):

  • Favicon
    • Small icon shown in the browser tab.
  • “Outback image” (likely meant: Open Graph / share image)
    • Representative image shown when sharing a link.
    • Recommended size stated: 1200 × 630.

6) Operations (ongoing improvement and growth)

Goal: Continuous monitoring, maintenance, and iteration based on data.

Operations includes:

  • Checking site health and identifying what needs continual adjustment.
  • Ongoing growth—this is not “done after deployment.”

Iteration loop:

  1. Discover issues through practitioner/data sources
  2. Repeat improvement through earlier stages (planning → design → development, etc.)
  3. Gradually move toward PMF (product-market fit) for what users truly need

Analytics terms and metrics:

  • Google Analytics (GA)
    • Tool to analyze visitor behavior:
      • entry sources
      • what users view
      • where they drop off or convert
  • Bounce rate (referred to as “departure”)
    • Percentage of sessions that end without meaningful interaction.
    • A session is framed as a bundle from entry → activity → leaving.
    • Interpretation given:
      • High bounce rate often indicates the first screen’s layout/content/UX doesn’t meet expectations.
  • Conversion rate
    • Percentage of visitors who complete key goal actions (sign up, purchase, inquiry).
    • Mentioned as a broad indicator covering things like button placement and text quality.
  • A/B testing
    • Randomly presents two or more design options.
    • Compares performance (e.g., bounce rate or conversion rate) to determine the better direction.

Closing summary: The video outlines how a website is created and grows, and previews the next lesson on responsive/adaptive/mobile-first.

Speakers / sources featured

  • Speaker (unnamed): the course instructor/lecturer who explains the process step-by-step.
  • Tool/source mentioned: Sigma (used for basic prototyping).
  • Tool/source mentioned: Google Analytics (GA).

Original video