lifecarelog
브랜딩·마케팅

확인 버튼 위치와 아이콘 방향, 취향 아닌 브랜드 규칙으로 고정하기

확인 버튼은 오른쪽, 새로고침은 시계방향. 플랫폼 관습을 1인 브랜드 규칙 문서로 적어 두고 앱·스크린샷·SNS 카드까지 같은 모양을 유지하는 방법이에요.

6분 읽기

1인 브랜드는 앱 화면, 앱스토어 스크린샷, SNS 카드, 블로그 캡처를 한 사람이 다 만들어요. 그래서 작은 결정 하나가 여러 채널에 그대로 복제돼요. 확인 버튼이 어떤 화면에선 오른쪽, 다른 화면에선 왼쪽에 있으면 보는 사람은 이유를 모른 채 "뭔가 어설프다"고 느껴요. 이건 취향 문제가 아니에요. 플랫폼이 이미 정해 둔 관습이 있고, 사용자의 손가락은 그걸 기억하고 있어요.

플랫폼이 이미 정해 둔 것

  • 애플 휴먼 인터페이스 가이드라인과 구글 머티리얼 디자인, 2곳 모두 확인·긍정 버튼을 오른쪽 끝에 두라고 해요. 취소는 왼쪽이에요.
  • 윈도우(Fluent)만 확인이 왼쪽, 취소가 오른쪽이에요. 반대인 곳은 1곳뿐이죠.
  • 새로고침 아이콘은 시계방향 원형 화살표, 뒤로 가기는 왼쪽 화살표예요. 방향을 뒤집으면 사람들은 "앞으로"로 읽어요.

iOS·Android는 확인 오른쪽, 윈도우는 확인 왼쪽 — 새로고침 시계방향과 뒤로가기 왼쪽은 공통

직접 정리해 보니 생긴 일

플랜씨, 플랜비, 플랜엘을 같이 만들다 보면 제품마다 손이 가는 대로 버튼을 놓기 쉬워요. 저도 플랜비 회비 청구 확인창을 "취소 · 청구하기" 순서로 맞춰 봤더니, 그다음부터 다른 화면에서도 같은 순서를 기대하게 되더라고요. 반대로 화면을 나란히 놓고 테스트해 보면 순서가 어긋난 곳이 바로 눈에 띄어요. 사용자가 느끼기 전에 만든 사람이 먼저 걸려 넘어지는 거죠.

AI 코딩 도구나 이미지 생성 도구를 쓰면 이 어긋남이 더 자주 생겨요. 도구는 매번 새로 추측하거든요. 그래서 규칙을 사람 머릿속이 아니라 문서에 적어 두고, 도구에도 그 문서를 같이 넘겨야 해요.

규칙 문서는 5줄이면 충분해요

  1. 확인·긍정 버튼은 오른쪽, 취소는 왼쪽. 웹·iOS·안드로이드 공통.
  2. 삭제나 탈퇴 같은 파괴적 동작도 위치는 같고 색만 경고 계열로.
  3. 새로고침은 시계방향, 뒤로 가기는 왼쪽 화살표, 외부 링크는 오른쪽 위 대각 화살표.
  4. 스크린샷과 SNS 카드는 실제 화면을 그대로 캡처하고, 목업에서 버튼을 임의로 옮기지 않기.
  5. 예외는 사유 1줄을 문서에 남겨야 허용.

돌려 보니 가장 많이 걸리는 건 4번이었어요. 마케팅용 카드를 예쁘게 만들려고 버튼을 옮기면, 앱을 열어 본 사람은 광고와 다른 화면을 만나게 돼요. 신뢰가 깎이는 지점은 늘 이런 사소한 곳이에요.

콘텐츠 운영에 이렇게 써요

앱스토어는 기기당 스크린샷을 최대 10장, 구글 플레이는 최대 8장까지 올릴 수 있어요. 두 스토어를 합치면 18장인데, 이 중 1장만 버튼 순서가 달라도 눈썰미 좋은 사람은 알아채요. 그래서 발행 전에 3문항만 확인해요. 확인 버튼이 오른쪽인가, 아이콘 방향이 뜻과 맞나, 캡처가 실제 화면인가. 이 체크리스트는 블로그 캡처와 SNS 카드에도 똑같이 적용해요.

  • 확인은 오른쪽
  • 새로고침은 시계방향
  • 예외엔 사유 1줄

처음 문서를 만드는 데 30분 정도 걸렸어요. 그 뒤로는 새 화면을 만들 때 고민하는 시간이 사라졌고, 도구가 엉뚱한 자리에 버튼을 놓아도 규칙을 가리키며 고치면 끝이에요. 브랜드의 일관성은 로고 색보다 이런 손끝 관습에서 먼저 드러나요. 라이프케어로그의 플랜 시리즈도 이 5줄 위에서 같은 모양을 유지하고 있어요.

#브랜드 가이드#UI 관습#1인 개발

라이프케어로그 서비스가 궁금하신가요?

AI 기반 건강·일정·재활 관리 앱을 직접 써보세요.

서비스 살펴보기

관련 글

댓글

아직 댓글이 없어요. 첫 댓글을 남겨주세요.