디자인은 어디서부터 시작해야 하는가
무드보드부터 결정 단계 분리까지, 도구가 아닌 사고 흐름으로 디자인 프로세스를 잡는 법
Posted 
By okorion
7 min read 
디자인은 어디서부터 시작해야 하는가
결과물을 만드는 순서는 툴이 아니라 사고의 흐름이다
초보자는 보통 Figma를 열자마자 컴포넌트를 만들거나 화면을 그리기 시작한다. 프로는 그렇지 않다. 결정을 미루는 단계와, 결정을 고정하는 단계를 분리한다. 디자인 프로세스는 “예쁘게 그리는 과정”이 아니라 불확실성을 제거하는 과정이다.
1) 무드보드의 역할: “영감 수집”이 아니라 “방향 제한”
무드보드의 진짜 역할
무드보드는 아이디어를 늘리는 도구가 아니다. 선택지를 줄이기 위한 필터다.
- 무엇을 할지 정하는 게 아니라
- 무엇을 하지 않을지 정하는 단계
잘못 쓰이는 방식
- 예쁜 레퍼런스를 무작정 많이 모음
- 서로 다른 톤(미니멀, 화려, 기업용, 감성)을 한 보드에 섞음
- 결과: 이후 디자인 단계에서 판단 기준 붕괴
제대로 쓰는 방식
- 레퍼런스 5~10개 이내로 제한
공통 요소를 언어로 정리
- 색감: 밝다 / 어둡다 / 채도 낮음
- 분위기: 차분 / 역동 / 기술적
- 레이아웃: 여백 큼 / 카드 중심 / 그리드 강함
판단 기준
“이 무드보드 하나로 디자인 방향에 대한 논쟁을 끝낼 수 있는가?”
2) 와이어프레임이 필요한 진짜 이유
와이어프레임은 “대충 그린 화면”이 아니다. 정보의 우선순위를 고정하는 계약서다.
와이어프레임의 핵심 목적
- 콘텐츠의 순서
- 정보의 상대적 중요도
- 화면의 기본 구조
색, 폰트, 이미지가 없는 이유는 → 시각적 판단을 의도적으로 배제하기 위해서다.
와이어프레임을 건너뛰면 생기는 문제
- 디자인 중간에 콘텐츠 구조가 계속 바뀜
- “이게 더 눈에 띄어야 하지 않나?” 논쟁 반복
- 결국 디자인을 다시 엎음
판단 기준
“이 구조라면, 아무 스타일을 입혀도 망하지 않는가?”
3) Figma에서 스타일과 컴포넌트를 관리하는 사고방식
툴의 기능보다 중요한 건 언제 고정하고, 언제 열어두는가다.
순서가 중요하다
스타일 먼저 고정
- 컬러 토큰(Primary / Secondary / Neutral)
- 타이포 계층(Heading / Body / Caption)
컴포넌트는 나중에
- 버튼, 카드, 입력창 등 반복 패턴만 컴포넌트화
초보자가 흔히 하는 실수
- 화면 몇 개 그리자마자 컴포넌트부터 만듦
- 스타일이 아직 안정되지 않았는데 재사용 구조를 고정
- 결과: 나중에 전체 수정이 필요해짐
사고 기준
“이 선택이 다른 화면에서도 반복될 게 확실한가?” 확실할 때만 컴포넌트로 만든다.
4) 홈페이지 / 블로그 디자인의 사고 흐름 예시
① 홈페이지 디자인 흐름
목표 정의
- 방문자가 무엇을 이해하고, 무엇을 하길 원하는가?
콘텐츠 우선순위 정리
- 한 문장 핵심 → 보조 설명 → 행동
와이어프레임
- 히어로 → 문제 → 해결 → 신뢰 → CTA
무드보드 반영
- 톤, 여백, 분위기 적용
시각 디자인
- 컬러·타이포·이미지 적용
컴포넌트 정리
- 버튼/카드/섹션 패턴 고정
② 블로그 디자인 흐름
읽기 흐름 정의
- 제목 → 요약 → 본문 → 다음 행동
가독성 우선 와이어
- 줄 길이, 여백, 계층 먼저 결정
스타일 최소화
- 색·장식은 보조 역할
재사용 구조 확정
- 글 페이지 → 리스트 → 카테고리
공통 원칙
- 구조 → 스타일 → 반복 순서가 바뀌면 실패 확률이 급증한다.
5) 디자인을 시작할 때 항상 던져야 할 질문
- 지금은 결정의 범위를 넓히는 단계인가, 줄이는 단계인가?
- 이 화면에서 가장 중요한 정보 1개는 무엇인가?
- 지금 이 선택은 나중에 고쳐도 되는가, 아니면 지금 고정해야 하는가?
정리
디자인은 Figma를 여는 순간부터 시작되지 않는다. 생각의 순서를 정리한 뒤에 툴을 여는 것이 시작이다.
- 무드보드: 방향을 제한하는 도구
- 와이어프레임: 구조를 고정하는 도구
- 스타일/컴포넌트: 반복을 가능하게 하는 도구
이 순서를 지키는 것만으로도 결과물의 완성도는 한 단계 올라간다.
This post is licensed under CC BY 4.0 by the author.