무드보드

Moodboard

산출물

제품이 어떤 인상을 주었으면 하는지 정하려고 참고 이미지와 색을 한 판에 모아 둔 자료입니다.

등장 배경

인상에 대한 요구는 말로 옮기면 거의 언제나 어긋납니다. 대표가 "좀 더 신뢰감 있게" 라고 말할 때 그 사람 머릿속에는 이미 구체적인 화면이 하나 있습니다. 진한 남색 바탕에 여백이 넓고 글자가 얌전한 화면일 수도 있고, 흰 바탕에 선이 얇고 그림자가 거의 없는 화면일 수도 있습니다. 듣는 디자이너는 둘 중 어느 쪽인지 알 방법이 없습니다.

그래서 시안을 만들어 보여 주는 방식으로 답을 맞춰 보던 시절이 있었습니다. 문제는 시안 한 장을 만드는 데 며칠이 든다는 점입니다. 사흘 걸려 만든 화면을 들고 가서 "이게 아닌데요" 를 듣고, 다시 사흘을 들여 다른 방향을 만들고, 그러다 보면 아직 아무것도 정해지지 않은 채로 2주가 지나갑니다. 틀린 것은 배치도 기능도 아니고 인상 하나뿐인데 매번 화면 전체를 다시 만드는 셈입니다.

무드보드는 이 확인을 앞으로 당겨 값싸게 만든 물건입니다. 직접 그리는 대신 이미 세상에 있는 이미지를 모아 옵니다. 만드는 데 두세 시간이면 되고 틀려도 버리는 비용이 거의 없습니다. 사흘짜리 시안으로 묻던 질문을 반나절짜리 판으로 묻는 것이라 세 번 틀려도 손해가 하루 안쪽입니다. 아직 우리 제품 화면을 한 장도 그리지 않은 단계에서, 그릴 것의 방향만 먼저 정해 두는 자리입니다.

구성 항목

한 판에 들어가는 것은 대개 다섯 가지입니다. 항목마다 답하는 질문이 다릅니다.

  1. 참고 화면과 사진 — 다른 제품이나 브랜드에서 가져온 이미지입니다. 전체 인상을 한눈에 전하는 자리라 보통 여덟에서 열다섯 장을 깝니다.
  2. 색 — 화면에서 뽑아낸 색을 색상값으로 적어 둡니다. 나중에 컬러 팔레트로 정리될 재료이지만 이 단계에서는 "이런 톤" 정도만 잡습니다.
  3. 글자 — 타이포그래피, 곧 글자를 다루는 설계의 방향입니다. 서체 이름까지 정하지 않더라도 획이 굵은 쪽인지 얇은 쪽인지, 각진 쪽인지 둥근 쪽인지는 정합니다.
  4. 형태와 질감 — 모서리를 둥글게 깎을지, 그림자를 쓸지, 선으로 나눌지 여백으로 나눌지 같은 것들입니다.
  5. 형용사 서너 개 — 이미지에서 읽어야 할 인상을 말로 못 박아 둡니다. "단정한, 차분한, 조금 딱딱한" 처럼 적습니다.

마지막 항목이 빠지면 판이 제 역할을 못 합니다. 같은 이미지를 보고도 어떤 사람은 색을 읽고 어떤 사람은 여백을 읽기 때문입니다. 형용사가 적혀 있으면 "이 사진에서 가져올 건 색이 아니라 여백입니다" 라는 말이 가능해집니다.

반대로 넣지 않는 것도 분명합니다. 우리 제품의 화면, 버튼의 위치, 메뉴 구조는 이 판에 들어가지 않습니다. 그것들은 와이어프레임이 맡는 질문입니다. 구조를 같이 얹으면 회의가 곧장 버튼 위치 이야기로 넘어가고 인상은 끝내 정해지지 않습니다.

작성자와 독자

만드는 사람은 디자이너입니다. 페이지덱에서는 민서가 반나절 동안 이미지를 모아 한 판을 만듭니다. 혼자 만들지만 혼자 보려고 만드는 것이 아니라서, 고르는 기준이 "내가 좋아하는 화면" 이 아니라 "선택지가 갈리는 화면" 입니다. 비슷한 인상 열 장을 모으면 아무것도 결정되지 않습니다.

읽는 사람은 결정권을 가진 쪽입니다. 대표 규원과 프로덕트 매니저 지현이 보고 그 자리에서 방향을 고릅니다. 이들에게는 디자인 용어가 없어도 됩니다. 두 판을 나란히 놓고 "왼쪽" 이라고 말할 수 있으면 충분하고, 그게 이 물건이 이미지로 되어 있는 이유입니다.

그래서 보여 주는 자리도 정해져 있습니다. 파일만 공유하고 각자 보라고 하면 의견이 열 갈래로 흩어지고 아무도 최종이라고 말하지 않습니다. 한자리에 모아 놓고 30분 안에 하나를 고르게 하는 편이 낫습니다. 이때 고른 결과는 회의록이 아니라 판 자체에 적어 둡니다. 채택한 판 위에 "2026-03-04 확정, 사진 톤은 B 판" 처럼 남겨 두면 두 달 뒤 같은 논의가 돌아왔을 때 근거가 남습니다.

개발자는 이 단계의 독자가 아닙니다. 태오가 무드보드를 보고 할 수 있는 일이 없습니다. 구현에 필요한 값은 훨씬 뒤에 목업과 레드라인에서 나옵니다.

실무 용례

"무드보드 두 개 만들어 왔어요. A 는 차분한 쪽, B 는 힘 있는 쪽이에요."

방향을 둘로 좁혀 왔으니 골라 달라는 요청입니다.

"이건 무드보드에서 이미 아니라고 한 방향인데요."

지난 결정으로 되돌아가는 논의를 끊는 말입니다.

"디자인 시스템 있으니까 이번엔 무드보드 건너뛸게요."

색과 글자 규칙이 이미 한 벌 정해져 있어 인상을 다시 정할 이유가 없다는 뜻입니다.

페이지덱이 기업 고객용 화면을 새로 만들기로 한 자리에서 이 순서가 그대로 돌았습니다. 규원이 "무료 플랜 화면보다 묵직했으면 좋겠다" 고 말했고, 민서는 그 말만 가지고 그리는 대신 이틀 뒤 피그마 파일에 판 두 개를 올렸습니다. 한 판은 어두운 바탕에 여백이 넓었고 다른 판은 흰 바탕에 선이 얇았습니다.

규원이 고른 것은 어두운 쪽이었지만 "사진은 왼쪽 판 걸로" 라는 단서가 붙었습니다. 결정에 15분이 들었고, 이 15분이 없었다면 민서는 흰 바탕 시안을 사흘 만들고 나서 같은 말을 들었을 것입니다.

흔한 오해

무드보드를 디자이너의 취향 수집이라고 보는 경우가 많습니다. 예쁜 이미지가 모여 있고 기능 설명이 한 줄도 없으니 그렇게 보입니다. 하지만 이 판은 선택지를 좁히려고 만드는 것이라 내용이 갈라져 있어야 제 몫을 합니다. 취향 모음으로 취급해 결정 없이 "좋네요" 하고 넘어가면, 그 뒤 시안 단계에서 방향 이야기가 처음부터 다시 시작되고 무드보드에 쓴 시간만 사라집니다.

이미지를 그대로 베낀다는 오해도 있습니다. 판에 올린 화면과 비슷한 제품이 나올 거라고 짐작하는 것입니다. 실제로 가져오는 것은 인상을 만드는 속성뿐입니다. 여백을 넉넉히 둔다, 색을 두 개로 줄인다, 글자 굵기를 하나만 쓴다 같은 것들입니다. 베끼는 것으로 오해하면 법무 걱정 때문에 참고 이미지를 못 올리게 되고, 그러면 말로 인상을 맞추던 시절로 돌아갑니다.

같이 보면 좋은 페이지

  • 디자인 산출물

    무드보드가 어느 단계에 놓인 물건인지 전체 순서로 봅니다

  • 와이어프레임

    인상이 정해진 다음 곧바로 이어지는 구조 단계의 산출물입니다

마지막 업데이트 2026-09-16