로그인 화면은 앱의 첫인상입니다. 여기서 사용자가 불편함을 느끼면 이탈 확률이 크게 올라갑니다. 1타 강사 스타일로 오늘은 실무에 바로 적용할 수 있는 로그인 화면 UI를 Figma로 만드는 방법을 A부터 Z까지 풀어드리겠습니다.
1. 로그인 화면 UI, 왜 중요한가?
- 사용자가 앱 신뢰도를 결정하는 첫 관문입니다.
- 회원가입, 로그인 성공률을 좌우합니다.
- 브랜드 이미지를 처음 심는 자리입니다.
👉 결론: 예쁘기만 한 화면이 아니라, 빠르고 직관적인 흐름을 설계해야 합니다.
2. 필수 요소 정의하기
로그인 화면은 최소한 다음 요소를 포함해야 합니다.
- 앱 로고 (또는 브랜드 네임)
- 이메일 입력 필드
- 비밀번호 입력 필드
- 로그인 버튼
- 비밀번호 찾기 링크
- 회원가입 링크
- 소셜 로그인 버튼 (선택)
👉 실전 Tip:
소셜 로그인(Google, Apple, Kakao 등)은 요즘 거의 기본입니다. 초기에 꼭 고려하세요.
3. Figma에서 로그인 화면 UI 실습
3.1 새로운 Frame 생성
- Figma를 열고, Frame Tool(F)을 선택합니다.
- 디바이스 프리셋에서 iPhone 14 또는 Pixel 7을 선택합니다.
3.2 배경 설정
- 배경색은 깨끗한 화이트(#FFFFFF) 또는 약간 부드러운 톤 (#FAFAFA) 추천
3.3 로고 배치
- 화면 상단 중앙에 로고를 배치합니다.
- Top margin은 80~100px 확보합니다.
3.4 입력 필드 추가
- 이메일 입력창, 비밀번호 입력창을 세로로 배치합니다.
- Input Height는 48px, Border Radius는 8px 권장
- Placeholder Text는 회색(#AAAAAA) 톤 사용
3.5 로그인 버튼 추가
- Primary Color로 설정된 버튼 사용
- 버튼 높이 52px, 폰트는 Bold, 16px
- 전체 너비(Width)는 화면 기준 80~90% 차지
3.6 추가 링크 배치
- "비밀번호를 잊으셨나요?" 텍스트 링크는 로그인 버튼 하단에 작은 사이즈로 배치
- "회원가입" 링크는 화면 맨 아래 중앙 정렬
3.7 소셜 로그인 옵션 추가
- Google, Apple 로그인 버튼 추가
- Secondary Button 스타일 적용(테두리만, 배경 투명)
4. 실전 레이아웃 정리
- 로고 → 이메일 입력창 → 비밀번호 입력창 → 로그인 버튼 → 비밀번호 찾기 링크 → 소셜 로그인 → 회원가입 링크
👉 흐름은 무조건 간결하고 논리적으로 이어져야 합니다. 사용자가 '다음에 뭘 해야 하지?' 고민하게 만들면 실패입니다.
5. 디자인 디테일 잡기
5.1 Spacing
- 컴포넌트 간 간격(Spacing)은 16px 또는 24px로 통일
- 로고와 첫 입력창 사이 거리는 여유 있게 (80~100px)
5.2 Color Palette
- Primary Color: 브랜드 색상
- Secondary Color: 링크, 보조 버튼
- Background: 화이트 또는 라이트 그레이
5.3 Typography
- 로고: Bold
- 입력 필드 Placeholder: Regular, Gray 색상
- 버튼 텍스트: Bold, 대비 높은 색상
5.4 버튼 상태 처리
- Hover, Pressed, Disabled 상태를 Variants로 미리 제작
6. UX 최적화 팁
- 오류 메시지는 입력창 하단에 빨간색(#FF3B30)으로 짧게 표시
- 비밀번호 입력창에 '보기' 아이콘 추가 (비밀번호 토글 기능)
- 로딩 상태를 버튼 안에 Spinner로 표시
7. iOS와 Android 차이 반영하기
- iOS: Rounded 버튼 스타일, 폰트는 San Francisco
- Android: 약간 더 크고 분명한 버튼 스타일, Roboto 폰트
8. 최종 점검 체크리스트
- 터치 영역 48px 이상 확보했는가?
- 타이포그래피 일관성 지켰는가?
- 오류 처리 플로우 설계했는가?
- Light Mode와 Dark Mode 모두 지원 가능한가?
결론
로그인 화면은 단순한 '입구'가 아닙니다. 사용자 신뢰, 앱 첫인상, 이탈률까지 좌우하는 핵심 화면입니다.
오늘 알려드린 프로세스대로 Figma로 차근차근 만들면, 현업에서도 바로 통할 수 있는 프로페셔널한 로그인 화면을 완성할 수 있습니다.
다음 시간에는 앱 내 네비게이션 바 디자인 실습으로 이어갑니다. 기대하세요!