마음챙김 온보딩 앱 디자인

Lull 온보딩 흐름

Lull의 온보딩 흐름은 OpenDesign이 제작한 공식 OpenDesign 예제입니다. 소스는 따뜻한 캔버스, 세리프 제목, 단일 강조색이라는 하나의 톤으로 구성된 화면 3개를 설명합니다. 이 디자인은 완성된 계정이나 명상 서비스가 아니라 모바일 앱 시퀀스로 제시됩니다.

첫 화면은 “Quiet beats noise.”로 시작합니다. 보조 카피는 수련을 “Twelve minutes a day”와 “a practice that fits in a coffee break”로 설명한 뒤 “streaks”와 “badges”를 분명히 배제합니다. 이 조합 덕분에 계정 생성을 요청하기 전에 제품의 약속이 또렷하게 읽힙니다.

시각 처리도 같은 절제를 뒷받침합니다. 첫 화면은 따뜻한 원형 구성이, 두 번째 화면은 주황색 체크 원이 있는 윤곽선 수련 카드가 이끕니다. 두 화면 모두 세리프 제목과 짧은 본문 위에 같은 일러스트 영역을 둡니다. 넉넉한 여백 덕분에 메시지가 자리 잡을 시간이 생기지만, 더 긴 카피나 추가 컨트롤을 넣을 여유는 줄어듭니다.

차분한 첫인상

첫 화면은 큰 주황빛 원, 작은 연한 원, 낮게 휘어진 바닥 형태를 어두운 세리프 제목과 결합합니다. 이 일러스트는 데이터 표시가 아니라, 텍스트가 루틴을 설명하기 전에 분위기를 만드는 역할을 합니다. 이 패턴을 응용하는 디자이너는 이미지와 카피의 균형을 유지하거나, 첫 뷰포트가 더 빽빽해지는 것을 감수해야 합니다.

이 흐름의 활용 사례

이 시퀀스는 로그인 선택지를 보여 주기 전에 일일 수련을 먼저 설명하려는 마음챙김 앱에 적합합니다. 순서는 의도적입니다. 사용자는 먼저 차분한 혜택 문구를 보고, 이어서 적응 방식 설명을 본 다음, 마지막에야 계정 설정 화면을 만납니다. 그러면 인증 컨트롤이 제품이 처음 전달하는 메시지가 될 가능성이 줄어듭니다.

카피는 실제 온보딩의 긴장도 겨냥합니다. 근거 없는 성과 약속을 하지 않으면서도 루틴을 실천할 수 있게 느끼게 해야 한다는 점입니다. “Shorter on busy days, deeper on quiet ones”는 의도한 적응 방식을 쉬운 말로 설명합니다. 유연성은 전달하지만, 세션이 실제로 어떻게 바뀌는지, 그 동작이 구현되어 있는지는 이 디자인만으로 확인되지 않습니다.

이 흐름은 인터페이스 스타일링만큼이나 콘텐츠 위계를 공부하는 데 유용합니다. 첫 두 화면은 오른쪽 위에 “Skip”, 하단에 “Continue”를 쓰고, 마지막 화면은 보조 액션을 “Help”로 바꿉니다. 이 라벨들은 진행과 도움을 구분하지만, 캡처만으로는 두 컨트롤이 런타임에 무엇을 하는지 알 수 없습니다.

조용한 소개에서 계정 설정까지

휴대폰 화면 3개는 반복되는 구조를 가진 간결한 서사를 이룹니다. 처음 두 화면은 상단 상태 영역, “Skip” 컨트롤, 일러스트 영역, 제목, 본문 카피, 진행 표시, 하단 “Continue” 버튼을 동일하게 유지합니다. 반복 덕분에 소개 상태 간 전환을 쉽게 알아볼 수 있고, 세 번째 화면의 다른 레이아웃이 의미 있는 상태 변화로 느껴집니다.

첫 화면에서는 활성 진행 표시가 왼쪽 주황색 캡슐형 표시입니다. 두 번째 화면에서는 가운데로 이동합니다. 세 번째 화면은 오른쪽 주황색 캡슐형 표시를 사용하고, 일러스트와 하단 액션을 계정 옵션 3개로 바꿉니다. 따라서 보이는 표시는 시퀀스 내 위치를 알려 주고, 바뀐 콘텐츠는 온보딩이 설명에서 참여 단계로 넘어갔음을 알려 줍니다.

마지막 화면은 “Make a place for it.”로 시작하고, 이어서 “Save your sessions across devices. We don’t email, we don’t share.”라는 문장이 나옵니다. 그 아래에 테두리가 있는 큰 행 3개가 “Continue with Apple” “Continue with Google” “Continue with email”로 표시됩니다. 일관된 행 처리는 비교를 돕고, 서로 다른 원형 아이콘은 각 제공자를 빠르게 구분하게 합니다.

하단의 동의 문구에서는 “Terms”와 “Privacy Policy”가 강조색으로 표시됩니다. 소스에서는 이 링크가 자리표시자라고 밝히므로, 이 화면은 완성된 내비게이션이 아니라 약관 문구가 들어갈 의도된 위치를 보여 줍니다. 또한 약관 문구를 옵션 아래에 두는 데 따른 상충도 보여 줍니다. 주요 결정 영역에서는 벗어나지만, 그 문구가 설명하는 컨트롤과는 시각적으로 떨어집니다.

반복되는 구조, 달라지는 상태

첫 번째와 두 번째 화면은 거의 나란한 상태지만 일러스트는 다릅니다. 첫 화면은 따뜻한 원형 구성을, 두 번째 화면은 짧은 선, 주황색 컨트롤, 체크 표시가 있는 테두리 패널을 사용합니다. 시각적 밀도는 그대로 유지하면서 각 약속에 고유한 상징을 줍니다. 세 번째 화면은 이 일러스트 층을 완전히 없애 인증 선택지와 동의 문구가 들어갈 공간을 만듭니다.

보이는 디자인과 기능의 경계

캡처가 보여 주는 것은 서로 다른 휴대폰 상태 3개, 구체적인 카피, 컨트롤, 제공자 라벨, 진행 표시, 약관 문구 위치로 이루어진 시각적 온보딩 콘셉트입니다. 인증된 계정, 기기 간 세션 저장, 적응형 세션 로직, 완성된 Terms 또는 Privacy 이동, 작동하는 온보딩 흐름은 확인되지 않습니다. 세션 저장과 정보 비공유에 관한 문구는 디자인에 표시된 제품 카피이지, 검증된 서비스 동작이 아닙니다.

새로 구현하려면 인증, 세션 저장, 적응형 수련, 동의 처리 동작을 별도로 만들어야 합니다. 이 소스에서 Skip과 Help는 텍스트 span이고, Continue와 계정 행은 스타일이 적용된 div이며, Terms와 Privacy Policy는 목적지가 없는 앵커입니다. 이 시퀀스는 이러한 결정을 묘사할 뿐, 실제로 작동하게 만들지는 않습니다.

이 예제가 알려 주는 것

가장 쉽게 적용할 수 있는 교훈은 메시지 순서와 참여 요청의 관계입니다. 수련을 설명하고, 의도한 유연성을 설명한 다음, 계정을 요청합니다. Lull의 구체적인 카피, 일러스트, 개인정보 관련 문구는 이 예제에 속합니다. 새 제품은 이를 확정된 사실처럼 그대로 가져오지 말고, 자체 주장과 적응 규칙, 동의 이동 경로를 마련해야 합니다.