반응형
LinkedIn 개발자로 성장하면서 남긴 발자취들을 확인하실 수 있습니다.
Github WWDC Student Challenge 및 Cherish, Tiramisul 등 개발한 앱들의 코드를 확인하실 수 있습니다.
개인 앱 : Cherish 내 마음을 들여다보는 시간, 체리시는 디자이너와 PM과 함께 진행 중인 1인 개발 프로젝트입니다.
10년 후, 20년 후 나는 어떤 스토리 텔러가 되어 있을지 궁금하다. 내가 만약에 아직 조금 더 탐구하고 싶은 게 있고, 궁금한 게 있다면, 그게 설사 지금 당장의 내 인생에 도움이 안 되는 것 같더라도 경험해보자. 그 경험들을 온전히 즐기며 내 것으로 만들고, 내 일에 녹여내고... 그러다보면 그 점들이 모여 나란 사람을 그려내는 선이 될 테니까.

Recent Posts
Recent Comments
Total
관리 메뉴

꿈꾸는리버리

HIG읽기 : Launching 본문

오뚝이 개발자/human interface

HIG읽기 : Launching

rriver2 2022. 4. 3. 20:05
반응형

 정리 

Launching에서는 사용자가 앱을 Launching시에 준수해야 할 것들에 대해서 정리가 되어 있다. 이때 Launching이란, App이 시작될 때 특정 Screen을 잠깐 보여줬다가 App의 첫 화면으로 이동하는 과정을 말한다. 즉, 사용자가 앱을 사용하기 전에 데이터를 불러오거나, 앱을 사용하기 위한 설정이 요구되는 등의 앱의 실질적인 사용 이전 단계라고 생각하면 된다.

1) Launching의 중요성과 핵심 word

Launching의 중요성 

앱을 사용하는 사람의 입장에서 launching은 중요한 역할을 한다는 것은 누구나 짐작할 수 있다. 사용자들은 앱을 처음 사용할 때 launching화면을 보며 앞으로의 앱 사용에 대한 기대를 하기도 하고, 개발자는 launching 화면을 이용해서 사용자들을 유혹하기도 가이드 하기도 한다. 

 

이렇게나 중요한 launching에서의 핵심 내용은 다음과 같다.

핵심 word

1️⃣ fast 

너무 당연한 것,,이라 패스

2️⃣ seamless

네이버사전에 의하면 seamless는 "아주 매끄러운"의 의미를 가진다. seam은 "의복의 부분과 부분, 천의 끝과 끝을 봉합했을 때 생기는 선"으로 가죽쇼파의 봉제선을 예로 생각할 수 있다. 

그렇기 때문에 seamless라는 말은 쇼파를 어루만졌을 때 그 봉제선이 느껴지지 않는 것이라고 설명할 수 있겠다. 

즉, Launching에서의 seamless라고 하면 사용자가 Notification(e.g. 카톡와쑝 알림)을 타고 들어왔을 때 해당 내용을 확인할 수 있는 페이지를 보여준다던가, 이전에 앱을 나갔을 때의 페이지를 보여준다던가 처럼 사용자가 앱을 열었을 때 "아주 매끄럽게" 사용자가 기대하는 화면을 보여줘야 한다.

seamless 네이버 사전

 

2) 주요 내용들

1️⃣  launch screen을 제공하라. ( not splash image !)

프로그램이 시작되는 순간 시스템이 launch screen을 표시하고 프로그램의 첫 화면으로 빠르게 바꿔라. 

launch screen의 기능은 사용자에게 초기 콘텐츠를 로드할 때 앱이 빠르고 반응성이 좋다는 것을 어필하기 위해서이다.

launch screen에서 seamless하게 전환하기 위해서는 첫 번째 앱 화면과 비슷하고 주의를 끌지 않는 일반 화면을 설계해야 한다.

1) 개발자보다는 사용자를 위한 디자인, launch screen !

splash image는 과거에 콘텐츠 로드 시간을 벌기 위해서 많이 쓰였던 방식으로, 아직도 사용되는 앱들이 있다. 하지만 이러한 splash image는 사용자의 seamless보다는 앱의 광고(?)의 느낌이 더 가깝기에 iOS에서는 지양한다. 또한 대부분 로고만 보여주는 것이 아니라 약간의 애니메이션 효과를 함께 사용하게 되는데 이는 콘텐츠를 다 불러왔음에도 사용자는 애니매이션이 끝날때까지 기다려야 하기 때문에 사용자는 "앱이 느리다."라는 이미지를 가지게 된다.

2) 사용자가 앱으로 뭘할지 생각할 수 있는 시간을 벌어주는, launch screen !

사용자가 앱을 사용하기 전에 "이 앱으로 뭘 해야지"하는 생각을 벌어준다. 그냥 로고를 보여주는 것이 아니라 사용자가 실 서비스를 이용할 페이지의 화면의 틀을 보여주기 때문에 생각하는 데에 좀 더 도움을 준다. 또한 splash image처럼 애니메이션을 기다릴 필요도 없을 뿐더러, 앱을 키자 마자 콘텐츠들이 보이기 때문에 사용자는 "앱이 빠르다"라는 이미지를 가지게 된다.

3) 그렇다면 splash image와  launch screen의 차이는 뭘까?

왜 launch screen을 써라고 하는 걸까?

(좌) splash image vs (우)launch screen

왼쪽의 splash image로 사용자에게 앱의 로고를 보여주어서 마케팅을 위한 어필을 할 수 있다.

오른쪽의 launch screen은 사용자가 사용할 첫 화면과 비슷하게 안에 컨텐츠들이 채워지기 이전의 화면이 보여진다. 이를 통해 앱이 빠르게 실행되고 있음을 사용자가 인지하게 된다.

 

2️⃣ Orientation을 고려하라.

사용자가 실 서비스를 이용할 가로(landscape), 세로(portrait) 방향에 맞게 launch screen을 제공함으로, 사용자가 올바른 방향으로 device를 돌리도록 유도해야 한다. 이때 특별한 이유 제외하고 landscape일 때는 좌로 돌리든 우로 돌리든 가능하게 해야 한다. 

 

e.g. 가로 게임 앱일 경우에는 Launching screen도 가로여서 사용자가 앱을 실 사용하기 전에 폰을 돌리게끔 해야 한다.

 

3️⃣  앱을 키자마자 setup information 하도록 하는 건 피하라.

why ?

사용자들은 앱이 바로 실행되기를 기대한다. 따라서 정보를 입력하기 이전에 우리는 사용자에게 어떤 서비스를 제공할 것인지 보여줘야 한다. 만약 프로필 입력을 먼저 권유한다면, "귀찮아"라던가 "어떤 서비스길래 이렇게 입력해야하는거지? 두고봐"라던가,, 사용자의 심기를 건들 수 있다. 따라서 먼저 "우리는 이런 앱이야 ~" 소개를 하고 사용자가 스스로 입력을 하게끔 유도해야 한다.

사용자의 정보가 필요할 때는 어떡하나요?

- 개발자가 알아서 사용자 정보를 긁어와라. (e.g. 환경설정, icloud와 같은 동기화)

- 프로필 편집을 하라는 메세지를 남기고, 사용자가 앱 설정에서 정보를 수정하도록 유도함

- 최대한 다수의 사용자에 맞춰서 최초 설계를 하고 사용자가 바꾸고 싶다면 앱 설정에서 바꾸도록 해야 함

- 만약에 setup information이 필요하다면 처음 앱을 시작할 때 요청하고, 후에 앱 설정에서 바꿀 수 있도록 해야 한다.

 

(A)의 경우에는 앱 다운로드 후 앱을 구동했을 때 로그인 즉, setup을 요구한다. 이때, 좌측 상단에 둘러보기를 잘 보이지 않는 컬러로 넣음으로 넛지를 사용했음을 알 수 있다. 

(B)의 경우에는 앱 다운로드 후 앱을 구동했을 때 setup을 요구하지는 않았지만, 이후 앱을 사용할 때 setup을 하지 않으면 사용에 제한이 있는 경우이다. 

 

-> 둘 다 비슷한 플랫폼, 무엇이 더 좋을까?

: HIG 스터디에서 두 View의 화면 자체가 다르다고 이야기를 나눴다. 오늘의 집 같은 경우에는 커뮤니티 같은 느낌이 더 강하고, 와이아웃의 경우에는 마켓에 더 강하다고. 그래서 오늘의 집은 첫 화면에서 setup을 요구하는 게 아닐까 ? 하는 이야기를 나눴다.

 

4️⃣   앱 내에 라이센스 계약 및 면책 사항을 표시하지 마라.

why?

"사용자가 license를 동의 한 후에" 즉, EULA (End-User License Agreement)에 따라 사용자는 license를 확인하고 동의한 후에 앱을 깔게 해야 한다.

 

EULA (최종 사용자 라이센스 계약)
EULA는 사용자와 LOGITECH EUROPE S.A.(이하 "Logitech") 사이의 법적 계약입니다. 사용자는 본 계약을 자세히 읽은 후 소프트웨어를 설치하거나 LOGITECH 제품을 사용해야 합니다. 본 소프트웨어를 설치하거나 LOGITECH 제품을 사용할 경우 본 EULA의 조항에 구속됨을 동의하는 것입니다. 본 EULA의 조항에 동의하지 않을 경우, 구입처의 관련 반환 정책의 약관에 따라 환불을 위해 제품을 반환할 수 있습니다. ( 위 링크에서 일부 발췌 )

- App store에 license 명시해두기

카카오톡 license

+) 만약 사용해야 한다면 UX를 방해하지 않는 균형 잡힌 방식으로 통합해야 한다. -> 뭔말인지 모르겠음 ( 나중에 다시 읽을 때는 이해가 되길 ! ) 

If you must include these items within the app, integrate them in a balanced way that doesn’t disrupt the user experience. 

 

5️⃣ 앱이 재시작될 때 이전의 상태를 저장해두라.

 이전에 앱을 끌 때의 위치로 돌아가기 위해서 retrace한다고 생각하면 너무 귀찮지 않은가?

사용자가 앱을 끄기전 사용자가 있는 뷰 위치와 정보는 저장하고 후에 다시 앱을 열었을 때 제공해주어야 한다.

 

-> background에 앱이 남아있을 때에 대한 이야기인가 ?

: 주변 분에게 여쭤보니까 이거의 예시로 카카오톡을 알려주셨다.

tab bar에서 "뷰" 선택했던 것을 저장해두고, 껐다가 켰을 때 이전에 봤던 "뷰"View가 다시 열리는 것을 확인할 수 있다 !

6️⃣ rebooting하게 하지마라.

재부팅을 하지 않으면 실행이 어려운 메모리나 기타 문제가 발생하면, 그 이슈를 반드시 해결해야 한다. ( 즉, 재부팅은 있어서는 안 된다는 말. 개인적으로는 재부팅은 약간 웹스러운 느낌이 있다. )

재부팅은 사용자가 앱에 대한 신뢰성을 잃게 할 뿐만이 아니라 귀찮아서 앱을 떠나게 한다.

 

ex) 인스타.. 가끔 버튼이 안 먹어서 껐켰을 해야 할 때가 있다...😡

 

7️⃣  앱 사용 초반이나 너무 자주 피드백을 요청 하지마라.

앱 사용 초반에 피드백을 요청하게 되면 앱 개발에 유익한 정보를 얻을 수 없다. 사용자에게 앱에 대한 불편함이나 이점을 생각할 수 있도록 시간을 준 후에 리뷰 요청해야 한다. 그리고 너무 많이 피드백을 요청하면 사용자에게 피드백을 강요하는 것처럼 다가와 오히려 피드백 작성을 꺼려할 수 있다.

 

 

+ )  요즘 mz 세대는 자신이 참여하는 플랫폼에 좀 더 애정을 가진다고 한다. 리뷰나 피드백이 실 제품이나 서비스로 이어졌을 때의 만족감과 관심이 더 커진다고 ! 그리고 요즘에는 리뷰 문화가 잘 형성되어 있기 때문에 오히려 이 부분을 통해서 두터운 팬층을 만들 수 있을 거라 생각한다. 

책 ) 지금 팔리는 것들의 비밀

 

 NOTE 

오늘은 launching에 대해 알아봤다. 앱 사용자로서 당연하게 여겼던 것들을 하나하나 짚어보니까 이전에 개발자들과 디자이너가 얼마나 고심을 했었는지 짐작할 수 있는 시간들이었다. 이 문서를 보지 않았더라면 하지 말라는 짓을 하고 있는 개발자가 되었을 수도, 사용자의 편의를 고려하지 않은 개발자가 됐을 수도 있겠다는 생각이 들었다. HIG문서,, 너무 재밌다,,! ><

 출처 

https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/launching/

 

Launching - App Architecture - iOS - Human Interface Guidelines - Apple Developer

Launching The launch experience has a significant impact on the way people feel about your app. Regardless of the device people are using or how long it's been since they last opened your app, the launch experience should be fast and seamless. The guidelin

developer.apple.com

 

반응형

'오뚝이 개발자 > human interface' 카테고리의 다른 글

HIG읽기 : Modality  (0) 2022.04.06
HIG읽기 : Loading  (0) 2022.04.04
HIG읽기 : Onboarding  (4) 2022.04.03
HIG읽기 : Interface Essentials  (2) 2022.04.03
TextView vs TextField  (0) 2022.04.03
Comments