기획

• 사전 준비

   마인드맵: 기준이 될 아이디어나 키워드를 하나 적는다. 기준을 중심으로 주변에 하나씩 연관되거나 연상되는 단어나 내용을 적어나간다.
   제작하고자 하는 앱(자체 개발의 앱, 기존의 앱 리뉴얼 등)에 따라 관련된 사항을 적는다.
   고객 조사, 여론 조사, 아이디어 수집. 대략적인 앱의 구조 및 구성을 정리한다.
   외주의 경우, 클라이언트의 요청 사항을 확인하고 정리한다.

• 통합 커뮤니케이션 문서 작성

   통합 커뮤니케이션 문서: 문서 버전 관리, 앱 기능 구현 리스트, 화면 구조도 등 앱과 관련된 모든 내용을 포함한 문서
   협의 사항을 정리한다.
   필요에 따라 디자인 문서를 첨부하거나 별도로 작성, 관리한다.
   프로젝트 스케줄, 관련된 팀별 업무 목표 등을 포함시킬 수도 있다.

1. 표지
   프로젝트명, 개발사명, 최종 수정일, 최종 버전 등 표기
   
2. 목차
   문서 구성 내용에 대한 목차.
   관리와 참조에 용이하다.
   
3. 문서 버전 관리
   문서의 업데이트 및 관련 내용이 어떻게 진행되고 있는 지 작성.
   반드시 팀원들과 항상 공유될 수 있도록 한다.
   
4. 기능 구현 리스트
   구체적으로 어떠한 기능이 있는지 작성.
   세부 기능들의 작업 스케줄 및 진행/구현 가능 여부 작성.
   
5. IA (information architecture)
   앱의 논리적 진행 구조도.
   기능별로 화면의 구성을 다이어그램을 통해 설명하여 구체적인 앱의 구조를 파악한다.
   반드시 작성하여 해당 페이지의 위치를 알 수 있도록 한다.
   플로우 차트(Flow Chart)를 포함하여 앱의 기능 위주의 구성을 나타낼 수도 있다.
   
6. 네이밍 룰 (Naming Rules)
   세부 이미지 파일명 저장 규칙.
   여러 명으로 팀이 구성되어 장기적으로 이미지 소스를 관리해야 할 경우 반드시 지킨다.
   룰과 관련된 세부사항을 입력해두어, 다양한 상황에 대해 적용하는 방법을 설명한다.
   실제 적용되는 용어를 리스트로 정리하여 필요 시 보고 적용할 수 있도록 한다.
   
7. 마케팅 기획(Marketing Plan)
   마케팅과 관련하여 앱의 기능적인 측면 위주로, 시기 및 시나리오 형식으로 작성하면 알아보기 쉽다.
   
8. 타깃 디바이스 (Target Devices)
   기준 디바이스 및 타깃 디바이스들의 해상도를 표기.
   디바이스의 이미지를 문서에 포함하면 쉽게 이해할 수 있다.
   디자인 작업 시 백터 방식으로 최대한 작업한다.
   비트맵으로 작업해야 할 경우 실제 사용 사이즈보다 크게 작업해야 리사이징 시 퀄리티의 문제가 생기지 않는다.
   
9. 페이지 구성
   스토리보드, 스크린디자인, 페이지 디자인, 앱 아이콘 디자인 등.
   

디자인구체화

• 레이아웃 스케치

   로딩 페이지부터 각 페이지들의 배치.
   상단의 네비게이션 바, 하단의 탭 바 등 기획 요소를 전부 반영.

• 와이어 프레임

   대략적인 설계도.
   디자인 레이아웃과 컴포넌트들의 기능적인 측면을 위주로 빠르게 구성하여 테스트하는 것을 목적으로 둠.
   앱 쿠커, 플루이드 UI 등 활용.

앱 프로토타이핑

기능적인 측면에서 앱의 사용성을 테스트하는 것.

사용자는 한 번 사용해보고 불편하면 불평을 하거나 다음에 다시 사용하지 않는 경향이 있다.
때문에, 혼자만 보고 만족할 것이 아니라면 급한 상황이더라도 프로토타이핑을 진행해야 한다.

일부 요소는 추후 업데이트를 통해 개선될 수 있지만, 사용성과 관련된 부분은 최선을 다해서 최고의 사용성을 제공하도록 한다.

테스트는 각 페이지들을 실 사이즈로 출력해 실제처럼 사용해보거나, 책상이나 벽 등에 나열하여 진행 순서를 머릿속으로 그려보는 방법이 있고,
파워포인트나 아이패드 앱(앱 쿠커) 또는 웹 서비스(플루이드 UI)를 사용하는 방법도 있다.

프로토타이핑을 통해 앱이 얼마나 사용자 중심으로 이루어졌는지, 실제 기획 의도가 얼마나 반영되었는지, 네비게이션이 얼마나 효과적이고 효율적인지 등
앱의 목적과 사용자의 특성 등의 요소들을 고려하여 테스트를 실시한다.
테스트 실시 후에는 해당 사항을 반영하여 수정을 한 후 다시 테스트를 진행하는 것을 반복하며, 앱의 사용성 및 완성도를 높여나갈 수 있도록 한다.

앱 디자인

• 로딩 이미지

   로딩 Loading = 런치 Launch = 스플래시 Splash 이미지.
   앱 실행 시 처음에 로딩되는 동안 나오는 이미지. 앱의 첫 인상을 결정한다. 일반적으로,

1. 게임 앱
   제작사의 로고
   
2. 유틸리티 앱
   빠른 실행을 위해 메인 페이지를 살짝 보여준다.
   로딩 이미지가 없는 경우도 많다.
   
3. SNS 앱
   로딩 시 바로 사용자의 콘텐츠를 보여주는 것을 목적으로 하고 있어서, 사용자가 로딩 이미지를 통해 바로 접속되고 있다는 인상을 주고 있다.
   이처럼 앱의 특성에 맞추어 로딩 이미지를 제작한다.
   
   

• 레이아웃 디자인

   앱은 한정된 스크린에 모든 요소를 표현해야 해서 운영체제의 규칙성이 강하다.
   버튼의 위치, 바의 위치, 손가락 터치 최소 사이즈 등 위치나 사이즈가 거의 결정되어 있는 것과 다름없다.
   일반적으로 상단에는 상태바, 상태바의 아래에는 네비게이션바, 최하단부에는 탭 바 등이 위치한다.
   콘텐츠는 테이블 뷰를 사용하고, 게임이나 유틸리티의 경우는 한 화면에 하나의 내용을 담는다.

   항상 앱 마켓의 다양한 앱들, 특히 추천 앱들을 둘러보며 콘텐츠의 레이아웃이 어떻게 구성되는지 살펴보고,
   분석을 통해 어떤 요소들이 효과적인 사용성을 제공하고 사용자의 관심을 끄는 지 알아본다.
   기존 룰을 따르면서 앱의 콘텐츠에 맞는 특유의 사용성을 제공할 수 있도록 노력한다.
   최근엔 안드로이드와 iOS, 두 운영체제에 대해 앱을 출시하므로,
   개발 초기부터 최대한 일관된 형태의 레이아웃을 유지하기 위해 각 운영체제별로 지원 가능 및 정책 등에 대해 알아볼 필요가 있다.

• 아이콘 디자인

   각 운영체제에서 지정하는 의미를 내포시킨다.
   사용자가 혼동하지 않도록 기존에 사용되는 아이콘의 형태 및 의미를 충분히 이해하고, 최대한 존중한다.
   기본적으로 제공되는 기본 아이콘을 사용하는 것도 효과적인 대안이 될 수 있다.

• 컴포넌트 디자인

   앱의 각 구성요소.
   운영체제별로 조작 방식 및 구성에 차이가 있으므로 해당 운영체제의 컴포넌트 스타일과 사용 방법을 충분히 이해한다.

• 앱 아이콘 디자인

   앱 대표 이미지.
   앱 특성을 나타내며 간판 역할을 한다.
   초기부터 다양한 스타일 및 요소를 포함한 스케치 작업을 진행하며, 앱이 어느 정도 형태와 디자인 스타일을 갖추었을 때 구체화하는 것이 바람직하다.
   다양한 앱들의 앱 아이콘을 스케치해보며 그 스타일을 분석한다.

슬라이스 가이드 이미지 컷팅

슬라이스 가이드 = 이미지 가이드 = GUI 가이드 = UI 가이드.
디자인 작업이 완료된 후 해당 이미지들을 프로그램에 사용할 수 있도록 하나씩 분할 저장하는 단계.
통합 커뮤니케이션 문서에 포함하거나 파워포인트나 키 노트 등에 별도 작성.

1. 페이지별 이미지 붙여 넣기
   작성자, 날짜, 네이밍 룰 등의 기본적인 내용 입력 후, 디자인 작업의 캡쳐 이미지들을 각 페이지별로 붙여 넣는다.
   
2. 네이밍 룰에 따라 파일명 입력하기
   슬라이스를 진행할 컴포넌트를 선택한 후, 네이밍 룰에 따라 아이콘, 네비게이션 바 등에 대한 이미지의 파일명을 입력한다.
   버튼 등 하나의 이미지에 다양한 상태가 적용된 경우 또한 일일이 입력한다.
   
3. PSD 파일에 슬라이스 작업하기
   슬라이스 가이드를 근거로 진행. PDS파일의 각 슬라이스에 파일명을 입력
   
4. 추가 정보 입력
   슬라이스 정보 창에서 이미지의 사이즈 값과 위치 값을 슬라이스 가이드에 입력한다.
   
5. 웹 용으로 저장
   

컨버팅 & 멀티 디바이스 해상도 대응

• iOS 아이폰 시리즈 해상도별 컨버팅

   기준 디바이스가 아이폰 4S/S(해상도 640x960 px)일 경우, 아이폰 5는 아이폰 4S/S의 스크린의 세로영역만 176px 늘어난 격이므로
   초기 디자인 진행 시 사전 협의하여 해당 부분만 디자인을 하면 큰 문제없이 대응할 수 있다.

• 안드로이드 해상도별 컨버팅

   안드로이드는 해상도의 변화가 많고 디바이스 또한 다양하다.
   따라서 해상도에 맞춘 이미지를 각각 해상도에 맞는 폴더별로 탑재시켜서 스마트폰에서 각각 인식하여 사용하는 방식과 나인패치(9-Patch) 방식이 있다.

1. 나인패치
   하나의 이미지에 늘어날 수 있는 범위를 지정하여 상하좌우로 늘려서 해상도에 맞춘다.
   저장 방식은 ‘이미지명.9.png’이다.
   주로 액션바, 배경 이미지, 채팅 입력란 등에서 사용된다.
   개발과 디자인 콘센트 초기에 어떤 이미지를 나인패치로 갈 것인지 미리 협의하여 적용 가능한 스타일로 디자인해야 한다.
   상하좌우에 1px의 여백을 남겨두어 이미지가 늘어나는 부분과 콘텐츠가 들어가는 영역을 지정할 수 있도록 한다.
   
2. 이미지 리사이징 변환 공식 사용
   px = dp x (dpi/160)
   
   

• 아이폰 iOS & 안드로이드 / 멀티 OS 개발 시 대응법

   아이폰과 안드로이드폰을 기준으로 앱을 개발할 경우, iOS 개발 프로세스가 안드로이드에 비해 용이하여 주로 아이폰이 기준 디바이스가 된다.

! 본 내용은 2013년 발행 <스마트폰 앱 UX/UI 디자인> 책 일부를 정리한 것입니다.