앱 디자인의 설계 과정 및 안드로이드와 ios의 디자인 구조의 차이점에 대해

 
이 책은 이번 관광공사x카카오 공공api활용 공모전에 나가게 되며 읽게되었는데, 앱디자인의 설계과정과 안드로이드와 ios의 차이점 대해 간단히 정리해놓으면 좋을 것같아 한번 정리 해보고자한다.
 
 

앱 디자인의 설계 과정 - 자체개발

1. 아이디어 : 어떤 제품을 만들어낼지 구상 및 목표설정
 
2. 분석 : 시장조사와 수요조사, SWAT등의 아이템 분석
 
3. 와이어 프레임 : 앱의 기본 구조와 레이아웃을 설계 (페이지 구성, 네비게이션 흐름, 주요 요소들의 위치 등을 정의)
 
4. 프로토타입 : 피그마 등을 이용하여 전체적인 디자인 구성
 
5. 개발 및 디자인 수정 : 개발 착수 및 디자인 수정을 반복
 
(+유저 시나리오 (시놉시스 작성) : 대표적인 사용자 유형(페르소나)을 정의하고, 각 페르소나가 앱을 어떻게 사용할지 상세하게 묘사하여, 사용자들이 앱을 어떻게 사용할지 시나리오를 작성)
 
(+정보 구조설계 (플로우 차트) : 앱의 정보 구조를 시각적으로 표현, 플로우 차트를 사용하여 각 화면 간의 관계와 네비게이션 흐름을 명확히 작)
 

앱 디자인의 설계 과정 - 클라이언트 요구가 있을 때

1. 초기 미팅 : 프로젝트 목표, 범위, 일정, 예산 등에 대해 논의, 클라이언트의 기대치와 요구사항을 명확히 하여 프로젝트 초기 방향성 설정
 
2. 니즈 평가 : 클라이언트의 비즈니스 목표, 타겟 사용자, 주요 기능, 디자인 선호도 등을 조사, 프로젝트 요구사항 문서를 작성
 
3. research : 유사 앱 분석, 사용자 설문조사, 트렌드 조사 등을 수행, 앱 설계에 참고할 데이터와 인사이트를 확보
 
4. 사이트 개요 : 앱의 전반적인 구조와 내용을 개략적으로 설계, 주요 섹션과 페이지를 정의하고, 각 페이지의 목적을 명확히 설계
 
5. 사이트 맵 :  각 페이지 간의 관계와 경로를 명확히 정의, 앱의 계층 구조와 네비게이션 흐름을 시각적으로 표현
 
6. 와이어 프레임 : 앱의 기본 구조와 레이아웃을 설계 (페이지 구성, 네비게이션 흐름, 주요 요소들의 위치 등을 정의), 페이지의 기본 구조를 시각화한 와이어프레임을 작성
 
7. 내용 개요 : 각 페이지에 포함될 콘텐츠를 구체적으로 정의, 각 페이지에 포함될 콘텐츠를 정리한 문서를 작성
 
8. 랜딩 페이지 아트워크 : 랜딩 페이지의 레이아웃, 색상, 폰트, 이미지 등을 디자인하여 랜딩 페이지의 시각적 디자인을 완료
 
9. 이너 페이지 아트워크 : 내부 페이지의 레이아웃, 색상, 폰트, 이미지 등을 디자인하여 시각적으로 완성된 내부 페이지 디자인을 클라이언트에게 제시
 
10. 코딩 : 프론트엔드와 백엔드로 나누어 개발을 수행하 모든 기능을 구현, 앱의 초기 버전을 완성
 
11. 유효성 검증 : 개발된 앱의 기능과 디자인이 요구사항을 충족하는지 검증, 테스트를 통해 버그를 발견하고, 모든 기능이 정상적으로 작동하는지 확인
 
12. 콘텐츠 표본 : 앱에 사용될 실제 콘텐츠의 샘플을 준비후 테스트 진행
 
13. 크로스 플랫폼과 브라우저 테스트 : 앱이 다양한 기기와 브라우저에서 일관되게 작동하는지 확인하기 위해 테스트
 
14. 개선 : 테스트 결과와 사용자 피드백을 반영하여 앱을 개선
 
15. launch : 앱을 공식적으로 출시, 앱스토어에 등록하고, 마케팅 계획을 실행
 
16. 검색엔진등록 : 앱의 메타데이터를 최적화하고, 검색 엔진에 등록, 검색 엔진에서 앱의 가시성을 높여 사용자 유입을 증대
 

안드로이드와 IOS의 디자인 구조의 차이점

1. 상태바의 구조가 다름 (시간표시, 배터리 정보표시등 )
    - 안드로이드는 평균적으로 상단 네비게이션 바의 크기가 24pt이고, ios는 평균적으로 20pt,44pt이다. (19년도 책이라 아이폰x기준)
 
2. 네비게이션바 (뒤로가기 버튼등)
    - 안드로이드는 아래에 물리적버튼이 존재, ios는 뒤로가기버튼같은 네비게이션바가 존재하지않음
 
3. 탭바 ( 홈아이콘, 검색아이콘, 내정보아이콘등)
    - 안드로이드는 대부분 위에 존재하지만, ios는 아래에 존재함, 크기는 대부분 40pt정도로 잡음
 
4.툴바 (저장하기, 공유하기, 더보기등 의 도구모음) 
    - 안드로이드는 대부분 상단에 존재, ios는 하단에 존재 , 크기는 대부분 40pt정도로 잡음