UI 기획서 작성 가이드

기획서 예제

---

필자 크루가 작성했던 리포트 몇개를 레퍼런스로 제시하겠습니다.

리포트 제작에 도움이 된다면 좋겠습니다.

---

---

reference1.pptx

5.32MB

reference2.pptx

1.23MB

---

1. UI 기획서란? (정의)

UI 디자인 기획서는 “앱이 어떻게 보이고(UI), 어떻게 작동하는지(UX)”를 글과 그림으로 명시한 문서입니다.

• 목적: 디자이너에게는 ‘시각화의 기준’을, 개발자에게는 ‘기능 구현의 로드맵’을 제공하여 의사소통 비용을 줄이고 개발 공수를 최적화합니다.
• 현업에서의 명칭: 스토리보드(Storyboard), 화면 설계서, 와이어프레임(Wireframe), 기능 명세서 등으로 불립니다.

---

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

보통 기획서는 PPT나 피그마(Figma) 같은 툴을 사용하며, 화면 하나당 다음과 같은 3단 구조로 구성됩니다.

① 디스크립션 (Description / 기능 명세)

화면의 각 요소가 어떻게 작동해야 하는지를 개발 언어로 설명하는 영역입니다.

• 동작 조건: "버튼을 누르면 다음 페이지로 이동함", "입력창에 공백이 있으면 경고 메시지 노출"
• 데이터 조건: "최신순/인기순 정렬 가능", "글자 수는 최대 500자 제한"
• 예외 처리: "네트워크 연결이 끊겼을 때의 에러 화면 안내"

② 와이어프레임 (Wireframe / 화면 구조)

화면의 레이아웃을 단순한 도형(네모, 세모, 선)으로 시각화한 그림입니다.

• 버튼, 이미지, 텍스트, 입력창 등의 위치를 대략적으로 잡아서 배치합니다.

③ 정보 구조 및 흐름 (Flowchart / IA)

사용자가 앱에 진입해서 목적을 달성하기까지의 이동 경로를 보여줍니다.

• 로그인 화면 $\rightarrow$ 메인 화면 $\rightarrow$ 상품 상세 $\rightarrow$ 결제 완료 등 서비스의 전체적인 지도를 그리는 작업입니다.

---

3. UI 기획서 작성 프로세스 (5단계)

1. 메뉴 구조도(IA) 작성: 앱에 들어갈 전체 메뉴와 화면 목록을 트리 구조로 정리합니다.
2. 사용자 시나리오(User Flow) 설계: 사용자가 앱에서 움직이는 동선을 화살표로 연결해 봅니다.
3. 와이어프레임 그리기: 각 화면에 들어갈 컴포넌트(버튼, 텍스트 등)를 배치합니다.
4. 디스크립션 작성: 배치된 컴포넌트들의 작동 규칙과 예외 상황을 텍스트로 상세히 적습니다.
5. 공유 및 피드백: 개발자, 디자이너와 리뷰하며 구현 불가능하거나 누락된 로직을 수정합니다.

---

4. 실무에서 바로 통하는 치트키 (실무 팁)

💡 Tip 1. 예외 케이스(Worst Case)를 먼저 고민하세요.

기획자들은 보통 앱이 아름답게 잘 작동하는 'Happy Path'만 그리기 쉽습니다. 하지만 진짜 기획자의 역량은 "데이터가 없을 때(Empty State)", "인터넷이 끊겼을 때", "글자 수가 너무 길어 줄바꿈이 될 때" 같은 예외 상황을 얼마나 꼼꼼하게 정의하느냐에서 갈립니다. 이 부분이 촘촘해야 개발 고도화 단계에서 소통 오류가 줄어듭니다.

💡 Tip 2. 디자인은 디자이너에게 맡기세요.

기획서 단계에서 예쁜 색상이나 폰트, 화려한 아이콘을 넣으려고 애쓰지 마세요. 기획서의 목적은 **'구조와 기능 정의'**입니다. 기획서가 너무 화려하면 오히려 디자이너의 창의성을 제한할 수 있습니다. 무채색(회색, 검은색)과 단순한 도형만 사용하세요.

💡 Tip 3. 컴포넌트 명칭을 통일하세요.

똑같은 뒤로가기 버튼을 어디서는 '이전 버튼', 어디서는 'Back 버튼', 어디서는 'X 버튼'이라고 부르면 협업 프로세스가 꼬입니다. [공통 가이드] 페이지를 앞에 한 장 만들어서 버튼, 팝업, 토스트 메시지 등의 명칭과 기본 규칙을 미리 정의해 두세요.

💡 Tip 4. 피그마(Figma) 활용을 적극 추천합니다.

과거에는 PPT로 많이 작성했지만, 최근 실무에서는 90% 이상 **피그마(Figma)**를 사용합니다. 화면 배치와 디스크립션 작성을 동시에 할 수 있고, 화살표로 화면 흐름(Prototype)을 직접 연결해 볼 수 있어 개발자/디자이너와의 소통 속도가 2배 이상 빨라집니다.

---

---