Warm minimalism for auth-first product surfaces

카카오 로그인 시작점을 제품처럼 다듬은 첫 화면

Pluto Surface는 단순한 로그인 링크 대신, 브랜드의 결을 가진 진입면을 제공합니다. DESIGN.md의 크림 톤, 압축된 헤드라인, 에디토리얼 본문, 그리고 코드 에디터 감성을 한 화면 안에 정리했습니다.

카카오로 계속하기디자인 시스템 보기

Palette

Warm cream, brown ink, orange accent

Type System

Display, serif, mono의 세 가지 목소리

따뜻한 종이 질감의 배경, 정교하게 눌린 디스플레이 타이포, 그리고 부드러운 SCSS 토큰 레이어로 로그인 페이지를 제품 표면으로 끌어올렸습니다.

Editorial hero

히어로는 브랜드 소개와 액션을 동시에 처리합니다

72px 계열의 압축된 디스플레이 타이포와 세리프 바디 카피를 조합해 첫 스크롤에서 성격과 목적을 모두 전달합니다.

SCSS tokens

토큰과 믹스인으로 표면 언어를 재사용합니다

색상, 그림자, 라운드, 버튼, 카드 패턴을 SCSS에 분리해 이후 페이지 확장이 쉬운 구조로 바꿨습니다.

Responsive surface

모바일에서는 한 열로, 데스크톱에서는 에디토리얼 그리드로 전개됩니다

600px, 900px, 1280px 기준으로 카드, 내비게이션, 히어로 패널 구성을 자연스럽게 재배치합니다.

Callback continuity

인증 이후 화면도 같은 디자인 문법으로 이어집니다

OAuth 콜백 페이지에 동일한 컬러와 타입 시스템을 적용해 플로우가 끊기지 않도록 했습니다.

Design pillars

핵심 원칙

  • Warm cream background with subtle tonal depth
  • Compressed display headlines with generous whitespace
  • Mono-coded technical panel to anchor the product feel
OAuth ready

실제 카카오 인증 링크를 그대로 사용합니다

현재 요청의 host와 x-forwarded-proto 값을 읽어 배포 환경에서도 동작하는 redirect URI를 생성합니다.

로그인 진입점도 제품의 일부여야 합니다

지금 화면은 단순 랜딩이 아니라 인증을 시작하는 인터페이스입니다. 사용자는 어디로 이동하는지, 왜 이 페이지가 있는지, 무엇을 기대해야 하는지 즉시 이해할 수 있어야 합니다.

카카오 인증 시작맨 위로