앱 서비스 기획 전, 알아야 될 기본 개념

앱 서비스를 역기획하기 전에 너무 앱 서비스에 문외한이라서 PM 혹은 서비스 기획자가 꼭 알아야 될 모바일 앱 디자인 개념을 정리했다. 

 

 

Chat GPT "모바일 기획"

 

 

네이비트 앱 VS 모바일 웹앱

네이티브 앱 : 우리가 일반적으로 알고 있는 앱

< 특징 >

- 운영체제마다 언어가 다름

- 기능성 앱에 많이 쓰임

- 모바일 웹앱에 비해 시간과 비용이 더 많음

 

모바일 웹앱 : 모바일 전용 홈페이지

< 특징 >

- HTML 언어로 개발

- 정보성 앱에 많이 쓰임

- 앱 서비스가 서버에 존재

 

하이브리드 앱 : 네이티브 앱의 장점 + 모바일 웹앱의 장점

ex) 구글의 Flutter

 

 

모바일 사용자 제스처 (User Gesture) 종류

- 탭 : 화면을 한 손가락으로 두드리는 행위, 웹에서는 Click과 같은 개념

- 더블 탭 : 화면을 두 손가락으로 두드리는 행위, 엡에서는 Double Click과 같은 개념

- 프레스 : 화면을 손가락으로 누르는 행위 / 영역 복사 같은 기능에 많이 쓰임

- 팬 : 화면에서 손가락을 떼지 않고 드래그하는 행위 / VR이나 AR에서 많이 쓰임

- 드래그 : 화면에서 손가락을 대고 있다가 특정 방향과 특정 포인트로 움직인 후, 손가락을 떼는 행위

- 스와이프 : 화면에서 손가락을 대고 있다가 특정 방향으로 움직이는 행위

- 핀치 아웃, 핀치 인 : 줌인, 줌아웃

 

 

런처 아이콘 (Launcher Icon)

: 앱 서비스를 대표하는 아이콘 이미지

- iOS는 1024 x 1024px, Android는 512 x 512px

 

 

런치 스크린 (Launch Screen)

: 앱을 실행한 후, 처음 나타나는 인트로 화면

: 보통은 로고를 중앙 배치하지만 로그인이나 회원 가입을 유도해도 됨

 

 

다양한 예약어

예약어	뜻	예약어	뜻	예약어	뜻
sc	스크린	box	박스	ic	아이콘
btn	버튼	pop	팝업	in	Input 상자
img	이미지	ok	체크	ls	리스트
msk	마스크	bg	배경화면	thum	썸네일

 

 

나인패치

: 아이콘의 크기가 상황에 따라 바뀔 때, 하나의 이미지가 자동으로 늘어나거나 줄게 하는 기능

: iOS는 스트레칭 이미지라고 함

: 나인패치 제너레이팅 사이트 같은 곳에서 작업하면 편함

 

 

해상도 표현

웹 : PX

Android / iOS : DP / PT

모바일 웹 : Viewport