Ember · Design Directions

완성도를 올리는 네 가지 방향

색과 큰 흐름은 유지합니다. 바꾸는 것은 입력 화면, 얼럿, 메시지 — 지금 "싼마이"로 읽히는 지점들입니다. 각 안은 같은 네 화면을 다르게 풀었습니다. 취향이 아니라 어느 태도를 택할지 고르는 문서입니다.

00무엇을 고치는가

클라이언트 피드백과 QA 문서를 한 줄씩 대응시켰습니다. 네 안 모두 아래를 공통으로 만족합니다 — 다른 것은 표현이지 범위가 아닙니다.

입력 화면 전면 재설계

회원가입을 한 화면에 한 항목으로 쪼갭니다. 닉네임 · 성별 · 생일 · 전화번호 네 단계, 각 단계는 질문 하나와 입력 하나뿐입니다. 만 18세 미만은 생일 입력 즉시 그 자리에서 막습니다.

시스템 얼럿 제거

차단 · 신고 · 통화 확인 · 전송 실패가 모두 OS 기본 얼럿입니다. 전부 바텀시트로 바꿉니다. 앱이 자기 목소리를 갖는 가장 싼 방법입니다.

메시지를 제품 수준으로

헤더의 이름·사진을 누르면 상대 프로필로 갑니다. 지금은 길이 없습니다. 읽음·전송중 상태, 첫 대화 유도까지 채웁니다.

덜어내기

프로필 탭에서 Photos · About me · Notifications · Verification · Privacy 를 없애고 Unlock 하나를 크게 세웁니다. "나를 본 사람"을 그 자리에 넣습니다.

스켈레톤

빈 화면과 스피너 대신 레이아웃 모양의 스켈레톤. 목록·상세·채팅 세 곳에 공통 적용합니다.

4개 국어

한국어 · 영어 · 일본어 · 베트남어. 문구 길이가 1.6배까지 늘어나므로, 네 안 모두 버튼과 라벨을 고정폭으로 잡지 않았습니다.

Direction A여백

카드를 없애고 종이 위에 직접 씁니다. 질문은 크게, 나머지는 지웁니다. 한 화면이 한 가지만 묻기 때문에 장식이 필요 없어집니다.

카드 0개헤어라인 구분선28px 질문 타이포버튼은 하단 고정
9:41▮▮▮
2 / 4
생일이
언제인가요?
만 18세 이상만 가입할 수 있어요
1998
다음
회원가입 · 2단계진행바는 3px, 질문만 크게. 하단 버튼은 항상 같은 자리.
9:41▮▮▮
Ryan 님을 차단할까요?
차단하면 서로의 프로필과 메시지가 보이지 않습니다.
차단하기
취소
바텀시트OS 얼럿 대체. 파괴적 동작은 코랄, 취소는 외곽선.
9:41▮▮▮
Ryan ›
프로필 보기
오늘
사진 잘 봤어요
감사해요 :)
읽음 · 9:40
메시지
채팅헤더 전체가 프로필 링크. 말풍선은 잉크색으로 대비.
9:41▮▮▮
프로필
Seva, 30
프로필 72% 완성
Unlock Ember
무제한 좋아요 · 나를 본 사람 전체 공개
시작하기
나를 본 사람12 ›
프로필 수정
설정
프로필행 5개 삭제. Unlock 이 화면의 무게중심.
Direction B부피

눌러보고 싶게 만듭니다. 둥근 모서리와 옅은 그림자로 층을 만들고, 입력칸에도 바닥을 깔아 손이 갈 곳을 분명히 합니다. 데이팅 앱의 온기를 색이 아니라 형태로 냅니다.

라운드 20–28부드러운 그림자채워진 입력칸세그먼트 진행
9:41▮▮▮
생일을 알려주세요
나이는 프로필에만 표시돼요
1998
MM
DD
만 18세 이상만 가입할 수 있어요
계속
회원가입 · 2단계오류를 얼럿이 아니라 입력칸 바로 아래에서 말합니다.
9:41▮▮▮
🚫차단하기
🚩신고하기
🔗프로필 공유
닫기
바텀시트"…" 메뉴. 아이콘 + 라벨, 마지막에 닫기.
9:41▮▮▮
Ryan
사진 잘 봤어요
감사해요 :)
읽음
🎁
메시지 입력
채팅헤더의 이름이 눌리는 칩. 컴포저가 떠 있습니다.
9:41▮▮▮
Unlock Ember
나를 본 사람 12명 · 무제한 좋아요
지금 열기
Seva, 30
72% 완성
나를 본 사람12 ›
설정
프로필Unlock 이 최상단 카드. 나머지는 두 줄.
Direction C대비

사람을 보는 화면은 어둡게, 내가 쓰는 화면은 밝게. 사진과 영상이 주인공인 순간에 배경을 지워 몰입을 만듭니다. 영상통화가 있는 앱만 쓸 수 있는 카드입니다.

미디어=다크입력=크림코랄은 액션에만영상통화 정체성
9:41▮▮▮
STEP 02
생일
만 18세 이상만 가입할 수 있어요
1998
MM
DD
다음
회원가입 · 2단계가입은 몰입 구간이라 어둡게 잡았습니다.
9:41▮▮▮
영상통화를 걸까요?
분당 950 크레딧이 차감됩니다
전화하기
취소
바텀시트돈이 나가는 확인. 금액을 문장 안에 넣습니다.
9:41▮▮▮
Ryan ›
● 온라인
사진 잘 봤어요
감사해요 :)
읽음 · 9:40
메시지
채팅온라인 상태가 초록으로 살아납니다.
9:41▮▮▮
Seva, 30
프로필 72% 완성
Unlock Ember
나를 본 사람 12명 보기
나를 본 사람12 ›
프로필 수정
설정
프로필다크 히어로 + 크림 본문. 두 세계를 잇는 화면.
Direction D밀도

iOS 가 잘하는 것을 그대로 씁니다. 그룹 인셋 리스트, 오른쪽 정렬 값, 정확한 여백. 화려하지 않지만 싸 보이지 않습니다 — 완성도가 가장 빨리 올라가는 길입니다.

인셋 그룹 리스트값은 우측 정렬장식 최소구현 비용 최저
9:41▮▮▮
취소회원가입2/4
생일
만 18세 이상만 가입할 수 있어요
1998
07
11
만 18세 미만은 가입할 수 없습니다
다음
회원가입 · 2단계세 칸 인셋 리스트. 오류는 리스트 밑 캡션.
9:41▮▮▮
Ryan
차단하기
신고하기
취소
바텀시트iOS 액션시트의 구조를 우리 토큰으로.
9:41▮▮▮
Ryan
사진 잘 봤어요
감사해요 :)
읽음 9:40
메시지
전송
채팅가장 익숙한 형태. 학습 비용 0.
9:41▮▮▮
프로필
Seva, 30
72% 완성
Unlock
나를 본 사람 12명
열기
나를 본 사람12 ›
프로필 수정
설정
프로필Unlock 을 어두운 행으로 눈에 띄게.

05비교

기준A 여백B 부피C 대비D 밀도
첫인상차분·고급친근·따뜻몰입·프리미엄정확·안정
글로벌 앱 느낌강함보통강함보통
영상통화와의 궁합보통보통가장 좋음보통
4개 국어 대응좋음
여백이 흡수
주의
칩·버튼이 늘어남
좋음가장 좋음
리스트는 길이에 강함
구현 비용중상
그림자·모션

테마 2벌
기존 코드 재사용높음보통낮음가장 높음

제 추천 — A 를 기본으로, C 를 통화·브라우저에만

클라이언트가 지적한 건 색이 아니라 밀도와 마감입니다. A 는 카드를 걷어내 장식으로 가려온 어색함을 드러내고 정면으로 정리합니다 — "글로벌 앱 같다"는 인상에 가장 빨리 닿습니다.

다만 A 만으로는 영상통화라는 이 앱의 차별점이 시각적으로 드러나지 않습니다. 통화 화면과 브라우저 카드에만 C 의 다크 처리를 얹으면, 밝은 앱 안에서 그 순간만 무대조명이 켜집니다.

D 는 가장 싸고 빠르지만 "잘 만든 기본"에서 멈춥니다. B 는 따뜻하지만 지금 지적된 "자잘한 싼마이"와 같은 계열의 위험 — 그림자와 라운드는 미세하게 어긋나는 순간 바로 티가 납니다.

06정하고 나면

방향이 정해지면 QA 문서의 항목들을 그 안에서 한 번에 구현합니다. 순서는 아래와 같이 잡았습니다.

이미 고친 것도 있습니다 — QA 의 "채팅 오류"는 전송 응답 파싱 문제로 확인해 수정 배포했고, "이미지 안 보임"은 아바타 필드 위치 문제로 함께 나갔습니다. 실기기에서 확인 부탁드립니다.