UI 디자인 기획서 작성 가이드

기획서 예제

---

필자의 크루가 작성했던 기획서 몇개를 레퍼런스로 제시하겠습니다.

문서 제작에 도움이 된다면 좋겠습니다.

---

---

reference3.pptx

0.78MB

reference2.pptx

4.51MB

---

---

1. UI 디자인 기획서의 정의 (디자인 특화 버전)

디자인 특화 기획서는 앱의 기능적 작동 구현이 아니라, "브랜드의 정체성을 화면에 어떻게 시각적으로 녹여낼 것인가"를 정의하는 문서입니다. 디자인팀이 본격적인 픽셀 작업(GUI)에 들어가기 전, 프로젝트의 심미적 기준과 규칙을 세우는 나침반 역할을 합니다.

---

2. 디자인 기획서에 반드시 들어가야 할 핵심 내용

디자인팀과 소통할 때 가장 중요한 4대 요소인 디자인 컨셉, 컬러, 타이포그래피, 컴포넌트 무드를 포함해야 합니다.

① 디자인 컨셉 (Design Concept & Mood)

앱이 사용자에게 전달해야 하는 전체적인 감성과 인상을 키워드와 이미지로 정의합니다.

• 무드보드(Moodboard): 말로 설명하기 어려운 느낌(예: '트렌디한', '신뢰감 있는', '따뜻한')을 전달하기 위해 유사한 톤앤매너의 타 서비스 레퍼런스, 이미지, 그래픽 요소를 모아 시각적으로 보여줍니다.
• 비주얼 키워드: 우리 앱을 표현하는 3~4가지 핵심 단어를 설정합니다. (예: 토스(Toss) = 미니멀, 직관적, 친근함)

② 컬러 시스템 (Color Concept)

브랜드 아이덴티티를 나타내는 색상 규칙을 정합니다. 감에 의존하지 않고 명확한 역할(Role)을 부여해야 합니다.

• 주색 (Primary Color): 앱의 정체성을 나타내는 메인 컬러 (브랜드 로고 색상 등, 전체 화면의 약 10~20% 비중).
• 보조색 (Secondary Color): 주색을 보조하며 강조(Point)를 줄 때 사용하는 컬러.
• 배경 및 무채색 (Background & Neutral): 배경색, 일반 텍스트, 라인 등에 사용되는 회색조(Grayscale) 시스템.

③ 타이포그래피 컨셉 (Typography)

앱의 가독성과 서정성을 결정하는 폰트 규칙입니다. iOS와 Android 환경을 모두 고려해야 합니다.

• 서체(Font Family) 지정: 본문용 시스템 폰트(샌프란시스코, 노토산스 등)와 타이틀용 브랜드 서체를 구분하여 제안합니다.
• 타입 스케일(Type Scale): 타이틀(H1, H2), 본문(Body1, Body2), 캡션(Caption) 등의 폰트 크기, 두께(Weight), 행간(Line-height)의 대략적인 기준을 제시합니다.

④ 디자인 스타일 가이드 (UI Style & Component Mood)

화면을 구성하는 개별 요소들의 '스타일 규칙'을 제안합니다.

• 그래픽 스타일: 플랫 디자인(Flat), 뉴모피즘(Neumorphism), 3D 그래픽 활용 등 어떤 스타일을 취할 것인가?
• 라운딩(Corner Radius): 버튼이나 카드의 모서리를 둥글게 할 것인가(친근함, 캐주얼), 직각으로 할 것인가(신뢰감, 프로페셔널).
• 아이콘 톤앤매너: 라인 중심의 얇은 아이콘 스타일(Line icon)을 쓸 것인지, 면을 채운 스타일(Solid icon)을 쓸 것인지 정의.

---

3. 디자인 기획서 구성 목차 (템플릿 추천)

디자인팀에 전달할 최종 문서는 보통 다음과 같은 목차로 구성하면 깔끔합니다.

목차	주요 포함 내용
1. Overview	프로젝트 개요, 타겟 유저(Persona), 기획 의도 및 핵심 가치
2. Design Concept	비주얼 키워드 정의, 톤앤매너 무드보드
3. Color System	Primary, Secondary, Background, 가독성을 고려한 다크모드 대응 여부
4. Typography	메인 서체 지정, 타이틀 및 본문의 굵기/크기 가이드라인
5. Layout & Component	그리드 시스템(Grid), 버튼/인풋창의 형태적 스타일(둥글기, 그림자 유무)
6. Reference	벤치마킹할 만한 국내외 우수 UI/UX 디자인 사례 링크 및 캡처본

---

4. 디자인팀과 협업할 때 유용한 실무 팁

💡 Tip 1. "예쁘게 해주세요"는 금물, '이유'를 설명하세요.

디자인팀에 "트렌디하고 예쁘게 해달라"고 하면 백이면 백 기획자가 생각한 것과 다른 결과물이 나옵니다. "타겟 유저가 20대 전문직 여성이니, 화려함보다는 **차분하고 이지적인 느낌(예: 뉴욕 타임즈 앱 같은 무드)**으로 가주세요"처럼 타겟과 목적에 근거한 시각적 예시를 들어야 합니다.

💡 Tip 2. 플랫폼 가이드라인(Material & Human Interface)을 존중하세요.

구글의 **머티리얼 디자인(Material Design)**과 애플의 **휴먼 인터페이스 가이드라인(HIG)**은 UI 디자인의 성경입니다. 기획 단계에서 이 표준 가이드라인을 벗어나는 독특한 레이아웃을 요구하면 디자인팀도, 개발팀도 난처해집니다. 표준 규격 안에서 컨셉을 녹여내도록 요청하세요.

💡 Tip 3. 피그마 '스타일(Styles)' 기능을 염두에 두고 기획하세요.

요즘 디자이너들은 피그마에서 컬러와 폰트를 시스템화(Design System)하여 작업합니다. 기획 단계에서 컬러칩이나 타이포 단계를 너무 무분별하게 남발하지 말고, "메인 컬러는 최대 2개, 텍스트 크기 종류는 5개 이내로 제한해 주세요"와 같이 시스템화하기 좋은 규칙을 제안하면 디자인팀의 작업 효율이 극대화됩니다.

---

디자인팀이 가장 반가워할 만한 정보는 "우리가 벤치마킹하고 싶은 워너비 앱 2~3개"와 "절대 피하고 싶은 워스트 앱 1개"를 명확히 짚어주는 것입니다.

 

---