디자인 프로세스 가이드

Full Flow

전체 흐름 (표준 7단계)

큰 에이전시·전문 외주 디자이너의 정석 코스. 1인 운영 컨텍스트에서는 1·2·6단계가 자주 통합·생략됩니다.

발견 (Discovery)

클라이언트 인터뷰·비즈니스 목표·타깃·경쟁사·레퍼런스 수집.

→ 산출: 브리프 문서

정보 구조 (Information Architecture)

사이트맵·페이지 인벤토리·사용자 흐름 정의. 무엇을 어디에 둘지.

→ 산출: 사이트맵·user flow

와이어프레임 (Wireframe)

색·폰트·이미지 없이 박스·텍스트 자리·정보 위계만. 구조 합의 단계.

★ 1차 컨펌

시각 디자인 (Visual Design)

컬러·폰트·이미지·아이콘·여백·shadow를 입힌 데스크탑 시안.

★ 2차 컨펌

반응형·인터랙션

모바일·태블릿 시안. hover·호버·전환·micro-interaction.

★ 3차 컨펌

디자인 시스템 (선택)

디자인 토큰·컴포넌트 라이브러리·spec 문서화. 대규모·장기 프로젝트만.

→ 산출: 컴포넌트 라이브러리

핸드오프 (Design → Dev) · QA

개발자에게 spec·redlines·assets 전달. 구현 후 디자인 review.

→ 산출: 개발 spec

Each Stage

각 단계 상세

단계마다 목적·산출물·도구·수정 비용이 다릅니다. 단계 합칠 때 어떤 risk가 생기는지 이해하면 압축 결정이 쉬워집니다.

01 · Discovery

발견 — 무엇을 만들지 합의

목적: 비즈니스 목표·타깃·톤·범위 정의
산출물: 브리프 1~2장·레퍼런스 mood board
도구: 미팅·Notion·Pinterest·Are.na
수정 비용: 최저 — 글자만 고치면 됨
생략 시 risk: 디자이너가 다른 방향으로 와이어를 그릴 수 있음 → 와이어 재작업

02 · Information Architecture

정보 구조 — 어디에 무엇을

목적: 페이지 수·메뉴·사용자 흐름 합의
산출물: 사이트맵·user flow·콘텐츠 인벤토리
도구: FigJam·Miro·Whimsical·종이
수정 비용: 낮음 — 박스·화살표만
소규모 사이트: 랜딩 1페이지면 IA 단계 생략 가능 (와이어가 곧 IA)

03 · Wireframe

와이어프레임 — 구조 합의 ★

목적: 색·폰트 없이 박스·텍스트 자리·정보 위계만 — 구조 합의
산출물: 페이지별 박스 wireframe (low~mid fidelity)
도구: Excalidraw·Balsamiq·Figma wireframe kit·종이
수정 비용: 싸다 — 박스 옮기기·삭제만
생략 시 risk: 큼 — 시안 다 그렸는데 "섹션 순서 바꿔주세요" → 시안 재작업

04 · Visual Design

시각 디자인 — 톤 합의 ★

목적: 컬러·폰트·이미지·아이콘·여백·shadow 적용
산출물: 데스크탑 high-fidelity mockup
도구: Figma·Sketch·Adobe XD
수정 비용: 중간~높음 — 톤 바뀌면 전 페이지 재적용
생략 시 risk: 코딩 다 한 뒤 "톤이 안 맞아요" → 개발·디자인 모두 재작업

05 · Responsive · Interaction

반응형·인터랙션 ★

목적: 모바일·태블릿 화면·hover·전환 정의
산출물: 모바일 mockup + 인터랙션 시안·prototype
도구: Figma (prototype·variants)·Framer
수정 비용: 낮음 — 데스크탑 시안 있으면 변형 위주
생략 시 risk: 출시 후 폰에서 깨져서 발견 → 사후 수정

06 · Design System (선택)

디자인 시스템

목적: 재사용 컴포넌트·디자인 토큰 정착
산출물: Figma library·spec 문서·Storybook
언제: 10+ 페이지 사이트·장기 운영 product·여러 디자이너 협업
1회성 셋업: 생략 — 정착 비용이 가치보다 큼

07 · Handoff · QA

핸드오프 (디자인 → 개발) · QA

목적: 개발자에게 spec·redlines·assets 전달 + 구현 후 디자인 review
산출물: spec sheet·SVG/PNG export·디자인 토큰·redline 주석
도구: Figma Dev Mode·Zeplin·Avocode
1인 운영: 디자인·개발이 같은 사람이라 핸드오프 자체 불필요 (자기 자신)

Fidelity

충실도 (Fidelity) 3단계

*얼마나 진짜 같은가*. 같은 와이어프레임도 fidelity에 따라 도구·시간·용도가 다릅니다.

Low

로우-피델리티

손그림·박스만

시간 5~30분
도구 종이·Excalidraw·whiteboard
용도 빠른 합의·아이데이션
강점 "이게 최종?" 오해 없음

Mid

미드-피델리티

박스 + 실제 텍스트

시간 1~3시간/페이지
도구 Balsamiq·Figma wireframe kit
용도 일반적 와이어 합의·콘텐츠 길이 확인
강점 텍스트 들어가서 분량·tone 검증 가능

High

하이-피델리티

색·폰트·이미지까지

시간 4~12시간/페이지
도구 Figma·Sketch·Adobe XD
용도 시각 디자인·최종 시안
주의 와이어 단계로 쓰면 "이게 최종" 오해 발생 — 수정 의견 위축

클라이언트에게 와이어프레임 단계에서는 low~mid 피델리티가 좋습니다. 너무 매끈하면 *이게 최종?* 으로 오해해 구조 의견이 줄어듭니다. 손그림 느낌이 오히려 *"색·디자인은 시안에서, 지금은 구조만"* 신호 역할.

Often Confused

자주 혼동되는 용어

와이어프레임·목업·프로토타입 — 비슷해 보이지만 *fidelity*와 *클릭 가능 여부*에서 다릅니다.

용어	Fidelity	클릭 가능?	목적
와이어프레임 (Wireframe)	Low~Mid	정적	구조·정보 위계 합의
목업 (Mockup) · 시안 (Comp)	High	정적	시각 디자인 합의
프로토타입 (Prototype)	Mid~High	가능 — 화면 전환·hover	인터랙션·흐름 검증
스타일 가이드 (Style Guide)	—	참조 문서	컬러·폰트·spacing 등 디자인 원칙
디자인 시스템 (Design System)	—	컴포넌트 라이브러리	재사용 정착·반복 작업 효율화
무드보드 (Mood Board)	—	참조 콜라주	톤·분위기 합의 (Discovery 단계)

Confirmation

컨펌 횟수는 왜 단계로 나누나

각 단계의 *수정 비용*이 다르기 때문에 단계가 나뉘어 있습니다. 합쳤을 때 risk를 이해하면 *어디까지 압축 안전한가* 결정이 쉬워집니다.

표준

3번 컨펌

와이어 + 시안 + 반응형

큰 에이전시·전문 외주 표준. 각 단계 완성도 높고 클라이언트 부담은 큼 — 3주 이상.

★ 안전성 최고

권장

2번 컨펌

와이어 + 시안·반응형 통합

1회성 셋업·소규모 사이트에 적합. 와이어로 *구조* 합의, 시안 단계에서 *시각 + 모바일*까지 한번에 검증.

★ 본 서비스 default

최소

1번 컨펌

시안 바로

클라이언트가 명확한 레퍼런스 사이트를 제공하고 *그대로 따라가는* 경우만. 그 외엔 시안 폐기 risk 큼.

⚠ 조건부 레퍼런스 명확 시

수정 비용 곡선

단계가 뒤로 갈수록 수정 비용이 지수 증가합니다. 와이어에서 박스 옮기는 비용 = 1이라면, 시안 단계 톤 바꾸기 = 5~10, 코딩 후 톤 바꾸기 = 20~50. 그래서 *앞 단계에서 합의*하는 게 표준.

와이어

×1

시안

×5~10

코딩 후

×20~50

출시 후

×100+

Tools

도구 landscape

단계·fidelity별 주류 도구. 본 서비스는 *와이어 = Excalidraw, 시안 = 코드 직접* 패턴.

도구	강점	단계	가격
Figma	업계 표준·collaboration·prototype·Dev Mode	와이어~시안~핸드오프	무료 plan·유료 $15/mo+
Sketch	macOS 네이티브·가벼움·plugin 풍부	시안 위주	$10/mo+
Adobe XD	(2024년 신규 가입 중단·Creative Cloud 내부만)	레거시	Creative Cloud 포함
Excalidraw	손그림 느낌·로그인 X·5분 시작·웹 즉시	와이어 (low fidelity)	무료·오픈소스
Balsamiq	와이어 전용·손그림 컴포넌트 풍부	와이어 (mid fidelity)	$9/mo+
FigJam · Miro · Whimsical	IA·flow·brainstorm 협업	Discovery~IA	무료~$10/mo
Framer	고급 인터랙션·publish 가능	시안~prototype~publish	무료~$15/mo+
Webflow	디자인 → 코드 통합·CMS 결합	시안 + 호스팅	$14/mo+ (호스팅 포함)
코드 직접 (Astro·Next·Tailwind)	시안 ↔ 실제 사이트 차이 0·작업 시간 단축	시안~출시 통합	무료 (개발 능력 필요)

Our Approach

본 서비스 적용

1인 운영 1회성 셋업 컨텍스트 — *7단계 풀코스 X, 2번 컨펌으로 압축*. 합치는 이유와 합치지 않는 이유.

합침

합치는 단계

Discovery + IA — 카카오톡 1:1 문의 단계에서 같이 진행. 별도 미팅 X.
시각 디자인 + 반응형 — 코드로 바로 작업하면 데스크탑·모바일이 *동시 완성*. 시안 단계 1번에 둘 다 검증.
핸드오프 — 디자인·개발이 같은 사람이라 핸드오프 없음.
디자인 시스템 — Tailwind utility class로 대체. 별도 라이브러리 정착 X.

유지

유지하는 단계

와이어프레임 (1차 컨펌) — Excalidraw 손그림. 구조 합의 30분이면 끝. 시안 폐기 risk를 막는 가장 싼 보험.
시안 + 반응형 (2차 컨펌) — stage URL로 실제 사이트 미리보기. *시안·실제 사이트 차이 0*이라 클라이언트 의견이 더 정확.

Workflow

실제 흐름

1. 카카오톡 1:1 — 비즈니스·타깃·레퍼런스 정렬
2. Excalidraw 와이어프레임 1장 → 카카오톡 링크 전달 → 1차 컨펌 (구조)
3. 코드 작업 (Astro + Tailwind) — 데스크탑·모바일 동시
4. stage URL 미리보기 전달 → 2차 컨펌 (시안 + 반응형)
5. production 배포 → 클라이언트 소유 인프라 위 자산

Glossary

용어 사전

자주 등장하는 디자인 용어 사전.

IA (Information Architecture): 정보 구조 — 무엇을 어디에 둘지·메뉴·페이지 흐름.
UX (User Experience): 사용자 경험 전반 — 흐름·반응속도·심리적 마찰까지.
UI (User Interface): 화면에 보이는 표면 — 버튼·색·폰트·여백.
Mood Board (무드보드): 레퍼런스 이미지·컬러·텍스처를 모아 톤을 합의하는 콜라주.
Style Tile · Style Guide: 컬러 팔레트·폰트·spacing 등 디자인 규칙 1~2장. 시안보다 가벼움.
Mockup · Comp: 시안 — 색·폰트·이미지 모두 입힌 정적 high-fidelity 디자인.
Prototype (프로토타입): 클릭·전환 가능한 인터랙티브 시안. 사용자 흐름 검증용.
Wireflow (와이어플로우): 와이어프레임 + user flow 결합. 화면 간 이동까지 표현.
Atomic Design: Brad Frost 방법론 — atoms → molecules → organisms → templates → pages 계층화.
Design Tokens (디자인 토큰): 색·spacing·폰트 등을 변수로 정의 — 디자인·코드 sync용.
Redline · Spec Sheet: 개발자 핸드오프용 — 측정값·여백·폰트 size 주석.
Hi-fi · Lo-fi: High-fidelity · Low-fidelity 줄임말. 시안 완성도 수준.
CTA (Call To Action): 행동 유도 버튼·링크 — "지금 신청하기"·"문의하기" 등.
Above the Fold: 첫 화면에 보이는 영역 — hero 섹션. 신문 접지 위 비유.
Responsive · Adaptive: Responsive = 연속적 화면 크기 대응 / Adaptive = 정해진 breakpoint별 별도 layout.
Breakpoint: 반응형 layout이 바뀌는 화면 폭 — 보통 768·1024·1280px.
Grid System: 화면 가로를 12·16칸 등으로 나눠 일관된 정렬 — Bootstrap·Tailwind grid.
Visual Hierarchy: 정보 위계 — size·color·weight·spacing으로 *어디부터 읽을지* 안내.