앱 서비스를 역기획하기 전에 너무 앱 서비스에 문외한이라서 PM 혹은 서비스 기획자가 꼭 알아야 될 모바일 앱 디자인 개념을 정리했다.
네이비트 앱 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
'My Work > 웹 & 앱 서비스' 카테고리의 다른 글
IA는 어떻게 쓰는 것이 맞을까? (1) | 2023.12.18 |
---|---|
웹/앱 서비스 프로세스 정리 (0) | 2023.12.17 |
GA 연습을 위한 데모 계정 연동 (0) | 2023.12.10 |
Open Graph (오픈 그래프) (0) | 2023.11.17 |
SEO (검색 엔진 최적화) 23년 버전 (1) | 2023.11.16 |