스토리보드 (3)

1. 스토리보드는 ‘그리기’ 이전에 이미 반 이상 끝난다

스토리보드는 도형을 잘 그리는 기술이 아님
→ 질문 → 가치 → 구조 → 시각화의 결과물

 

1-1. 가장 먼저 해야 할 것: 질문

의뢰가 들어오면 바로 그리지 않는다.

반드시 아래 질문부터 한다.

• 고객은 누구인가?
• 어떤 서비스를 하려는가?
• 매출 구조는 무엇인가?
• 어떤 구조를 원하는가?
• 기존 서비스와 무엇이 다른가?

📌 이 질문을 안 하면
→ 나중에 반드시 다시 그린다

 

2. ‘컨셉’과 ‘가치’를 먼저 정의해야 한다

2-1. 왜 가치가 중요한가

• 쇼핑몰이 3,000개 있으면
  → 가치가 없으면 3,000분의 1
• 그 경우 살아남는 방법은?
  → 마케팅 비용을 태우는 것뿐

2-2. 가치의 예

• 쿠팡 = 당일 배송
• 마켓컬리 = 새벽 배송

👉 이 가치는

• UI 이전에
• 사람 머릿속에 먼저 자리 잡은 개념

📌 스토리보드는 이 가치를 화면으로 번역하는 도구

 

3. 스토리보드 이전 단계의 전체 흐름

프론트 설계 전체 순서

1. 컨셉 정의
2. 핵심 가치 도출
3. 인포메이션 아키텍처(IA)
4. 텍스트 왁싱(Text Waxing)
5. 핵심 페이지 정의
6. 아이디어 스케치
7. 스토리보드 제작
8. 스프린트 회의
9. 디스크립션 & 코멘트 확정
10. 콘텐츠 설계

 

4. 텍스트 왁싱(Text Waxing)이 왜 중요한가

텍스트 왁싱이란?

• 의사결정권자와 ‘단어’를 맞추는 작업

예시

• 기획자: “장바구니”
• 의사결정자: “바구니”

👉 이걸 초기에 안 맞추면?

• 디자인
• 개발
• FAQ
• 문서

전부 다시 해야 함

📌 텍스트 왁싱은
→ IA 단계에서 반드시 끝낸다

 

5. 스토리보드는 ‘확정된 그림’이 아니다

잘못된 방식

• 스토리보드 → 바로 디스크립션 작성

추천 방식

1. 스토리보드 먼저 그림
2. 개발자 / 디자이너와 보면서 토론
3. 수정 사항 수렴
4. 구조 확정
5. 그 다음에 디스크립션 작성

📌 그래야 두 번 일 안 한다

 

6. 웹과 모바일 설계 사고의 차이

6-1. 웹(Web)

• 수천~수만 개 정보 존재
• 메인의 역할:
  → 잘 팔려야 할 것 / 노출돼야 할 것 큐레이션
• 정보 밀도가 높음

6-2. 모바일(App)

• 특정 목적을 가지고 진입
• 기능 중심
• 메인이 없는 앱도 많음
  • 예: 카카오톡

📌 앱에서 웹처럼 욕심내면

→ 사용자는 혼란

 

7. 화면 레이아웃 기본 용어 정리 (필수)

스토리보드를 그리려면 영역 용어를 알아야 함

용어의미

GNB	상단 글로벌 메뉴 바
GMB	GNB 하단 마케팅 바
Top Area / Identity Area	키 비주얼 / 통 배너
LMB	좌측 메뉴 영역
RMB	우측 보조 영역
Intro	인트로 영역
Body Area	본문
Footer	하단 영역

📌 이 용어를 알고 있어야
→ 디자이너/개발자와 소통 가능

 

8. 스토리보드 마스터 템플릿 개념

8-1. 슬라이드 마스터 원칙

• 첫 번째 마스터: 완전 비움
• 이후 마스터:
  • 표준
  • 이전 페이지 이동
  • 다음 페이지 이동
  • 이전/다음 페이지 이동

8-2. 디자인 테마로 저장

• 디자인 > 현재 테마 저장
• 이후 새 PPT에서도 바로 사용 가능

📌 스토리보드는 “파일”이 아니라 “환경”이다

 

9. 아이콘 템플릿 운용 방식

• 듀얼 모니터 사용
  • 1: 스토리보드
  • 2: 아이콘 템플릿
• 위치/사이즈 고정
• Ctrl + V로 빠르게 조립

📌 고수일수록
→ 새로 그리지 않고 근처에서 가져온다

 

10. 스토리보드는 ‘표(Table)’로 그린다

10-1. 언제 표를 쓰는가

• 클릭 시 하단이 바뀌는 영역
• 탭 전환
• 메뉴
• 리스트
• 카드

👉 거의 전부 표

10-2. 언제 박스를 쓰는가

• 하이퍼링크
• 새 창 이동
• 화면 전환 없음

 

10-3. 표의 절대 규칙

• 모든 선 굵기: 0.5
• 이 규칙을 깨는 순간:
  → 촌스러운 스토리보드

 

11. 정렬과 배치의 핵심 스킬

• 끝과 끝을 먼저 맞춘다
• 그 다음:
  • 맞춤 > 가로 간격 동일
• 썸네일 4개?
  → Ctrl + Shift로 복제 → 맞춤

📌 눈대중 금지

 

12. 오브젝트 & 입력 기본 규칙

기본 폰트

• 맑은 고딕
• 9pt / 8pt
• 기본 텍스트 상자 설정 필수

기본 도형

• 채우기 없음
• 윤곽선 0.5
• 기본 도형 설정

 

13. 표준 조작 키 (실무 필수)

키기능

Alt	부드러운 이동
Ctrl	복사
Shift	수직/수평 이동
Ctrl + Shift	복사 + 정렬 이동

 

14. 레이아웃 비율 감각 (고급 영역)

기본 비율 감각

• 1 : 3 : 6
• 좌우 1:1은 거의 없음
• 여백도 항상 다르게

좋은 레이아웃의 특징

• 넓어졌다 → 좁아졌다 → 넓어졌다
• 리듬이 있음
• 변화가 있음

📌 이 변화가 미적 완성도를 만든다

 

15. 와이어프레임 vs 스토리보드

와이어프레임

• 덩어리
• 구조 중심
• 비율 확인용

스토리보드

• 실제 화면 단위
• 표 기반
• 디테일 설계