자전거 앱 무드보드 만들기: Pixso에서 디자인 방향을 정하는 10단계

쓸모 있는 무드보드는 보기 좋은 사진을 모아 놓은 폴더가 아니라 디자인 방향에 관한 결정의 모음입니다. 만들고 싶은 경험을 먼저 정하고, 관련 있는 참고 자료를 모은 뒤, 그 방향을 뒷받침하는 이미지·색상·글꼴·상호작용 단서만 남기세요. 완성된 보드는 다른 디자이너가 ‘이 프로젝트에 어울리는 것은 무엇이고, 어울리지 않는 것은 무엇인가?’에 답할 수 있도록 해야 합니다.

이번 실습에서는 사람들이 한적한 길을 찾도록 돕는 동네 자전거 앱을 만든다고 가정합니다. 먼저 함께 시각적으로 아이디어를 모으는 공간에서 여러 가능성을 수집한 다음, 무드보드로 앱의 디자인 방향을 좁혀 나갑니다. 직접 만들기 전에 다양한 구성을 살펴보고 싶다면 다음 무드보드 예시를 살펴보세요.

무드보드란 무엇인가요?

무드보드는 시각적으로 정리한 디자인 브리프입니다. 사진, 색상 견본, 타이포그래피, 인터페이스 참고 자료, 질감, 짧은 메모 등을 담을 수 있지만, 모든 항목에는 목적이 있어야 합니다. 자전거 앱을 예로 들면 공원 사진은 차분한 분위기를, 경로 지도의 일부는 탐색을 단순화하는 방식을, 글꼴 견본은 제품의 말투와 인상을 제안할 수 있습니다. 이 단계의 보드는 아직 실제 서비스에 바로 적용할 화면은 아닙니다.

하나의 보드에서 여러 아이디어를 탐색할 수 있지만, 최종 방향을 정리한 보드에서는 선택이 드러나야 합니다. 참고 자료와 선택한 규칙을 구분해 두세요. 그렇지 않으면 눈에 띄는 이미지가 아직 논의 중인 후보인지, 팀이 사용하기로 합의한 결과인지 알기 어렵습니다.

무드보드를 사용하는 이유

모든 화면을 정교하게 만들기 전에 팀이 분위기를 논의할 수 있습니다. ‘친근한’, ‘활기찬’, ‘차분한’이라는 표현은 사람마다 다르게 해석하지만, 예시를 보여 주면 그 차이를 확인할 수 있습니다. 여러 사람이 참여하는 프로젝트, 이해관계자가 방향을 비교해야 하는 경우, 불완전한 브리프로 시각 디자인을 시작하는 경우에 특히 유용합니다.

이후의 선택을 확인하는 기준도 됩니다. 경로 화면에 갑자기 강한 네온색과 빽빽한 데이터가 들어갔다면 합의한 보드와 비교해 보세요. 무드보드가 사용성 근거나 제품 요구사항보다 우선하는 것은 아닙니다. 다만 의도적으로 방향을 바꾼 것인지, 디자인이 일관성을 잃은 것인지 구분하는 데 도움이 됩니다.

10단계로 만드는 자전거 앱 무드보드

1. 디자인 방향 정하기

사용자에게 제공할 경험을 한 문장으로 적으세요. 자전거 앱이라면 ‘지도가 지나치게 전문적으로 느껴지지 않으면서 더 조용한 경로를 찾도록 돕는다’라고 정할 수 있습니다. 대상 사용자, 화면 크기, 기존 브랜드 규칙 같은 제약도 몇 가지 덧붙입니다. 이 기준이 참고 자료를 선택하거나 제외하는 이유가 됩니다.

2. 기존 자료 모으기

제품 브리프, 현재 색상 팔레트, 로고 사용 규칙, 인터페이스 스크린샷, 기존 리서치부터 살펴봅니다. 무드보드를 아무 제약 없는 스타일 연습으로 취급하지 말고 기존 조건을 유지하세요. 반드시 지켜야 하는 요구사항과 아직 조정할 수 있는 아이디어를 구분합니다.

3. 영감을 주는 이미지 수집하기

처음에는 자전거 길, 도로 표지판, 공원, 지도, 관련 앱 화면 등 폭넓은 자료를 모읍니다. 나중에 공개 작업물에 사용할 가능성이 있는 이미지는 출처나 사용 권한도 함께 기록하세요. 이 단계의 목적은 가지런한 격자를 완성하는 것이 아니라 다양한 가능성을 확보하는 것입니다.

4. 움직임과 소리 검토하기

움직임이 중요하다면 정지 이미지 하나로 설명된다고 가정하지 말고, 해당 상호작용에 링크나 주석을 달아 주세요. 예를 들어 경로 미리보기에는 사용자가 어느 방향으로 이동하는지 알려 주는 부드러운 전환이 필요할 수 있습니다. 이 앱에서는 소리가 중요하지 않을 수도 있습니다. 디자인 결정에 도움이 되지 않으면 제외하세요. 보드에서 미디어를 참고 자료로 연결하는 것과 디자인 도구가 모든 형식을 직접 재생하는 것은 별개입니다.

5. 글꼴과 색상 선택하기

소수의 후보를 골라 실제 콘텐츠가 들어간 화면에 적용해 봅니다. 채도가 낮은 녹색과 따뜻한 중성색은 야외 활동이라는 주제에 어울릴 수 있지만, 지도 경로선과 버튼, 텍스트에는 충분한 대비가 필요합니다. 글꼴 견본도 장식적인 알파벳만 나열하지 말고 제목과 짧은 본문 문장을 보여 주세요.

6. 아이디어 정리하기

참고 자료를 분위기, 지도 표현 방식, 인터페이스 패턴, 타이포그래피, 색상처럼 역할별로 묶습니다. 중복 자료는 덜어 내세요. 비슷한 숲 사진 스무 장보다 분위기를 설명하는 사진 한 장과 정보 계층을 설명하는 화면 한 장이 더 유용합니다.

7. 새로운 아이디어를 위한 공간 남기기

승인된 방향과 분리된 ‘나중에 탐색’ 영역을 두세요. 리서치나 테스트에서 실제로 답해야 할 질문이 생기면 새 자료를 추가할 수 있습니다. 그러나 유행하는 이미지가 눈에 띌 때마다 합의한 보드를 조용히 바꾸지는 마세요. 무엇을 왜 변경했는지 기록합니다.

8. 의도 설명하기

선택한 자료 묶음 옆에 한 줄로 이유를 적습니다. ‘지도를 한눈에 읽을 수 있도록 경로선을 단순하게 표현한다’는 설명이 ‘현대적이다’보다 실행하기 쉽습니다. 어떤 항목이 영감의 원천이고 어떤 항목이 적용하려는 규칙인지 구분하세요. 다른 제품을 참고한다고 그 인터페이스를 그대로 복제할 권한이 생기는 것은 아닙니다.

9. 팀과 함께 검토하기

Pixso의 디자인 파일 캔버스 하나에 참고 이미지, 색상 견본, 예제 화면을 배치한 뒤 콘텐츠·인터페이스·브랜드 담당자와 검토합니다. 아래 예시는 수집한 영감과 선택한 방향을 구분합니다. 시각적 보드가 어떻게 두 개의 화면 디자인 결정으로 이어지는지 보여 주며, 소프트웨어가 그 결정을 자동으로 내려 준다는 뜻은 아닙니다.

10. 구체적인 피드백 받기

‘한적한 경로를 가장 잘 표현하는 참고 자료 두 개는 무엇인가요?’, ‘어떤 색 조합에서 경로가 잘 보이나요?’, ‘제품과 어울리지 않는 부분은 무엇인가요?’처럼 구체적으로 물어보세요. 답변을 보드 옆에 기록합니다. 막연히 좋다는 반응만으로는 디자이너가 다음 화면에 무엇을 반영해야 하는지 알 수 없습니다.

디자인 방향을 실제 화면으로 연결하기

다른 사람이 보드를 활용해 첫 화면을 만들고 그 선택을 설명할 수 있으면 무드보드가 준비된 것입니다. 자전거 앱에서는 명확한 경로선 표현, 절제된 색상, 읽기 좋은 글꼴, 의도한 분위기가 이에 해당합니다. 결정을 작은 UI 초안에 반영한 뒤 실제 사용자의 과제에 맞는지 확인하세요. 화면이 자전거 이용자의 경로 선택을 돕지 못한다면 콜라주를 고집하지 말고 디자인 방향을 수정해야 합니다.