[해결]로그인 페이지 디자인을 알아보자

로그인 페이지 디자인은 사용자가 계정을 확인하고 하던 작업으로 돌아가게 만드는 설계입니다. 입력 항목과 로그인 방식을 명확히 구분하고, 비밀번호를 잊거나 인증에 실패해도 다음 행동을 알 수 있게 해 주세요. 로그인은 서비스의 첫 화면일 수도 있지만, 상품을 고르거나 예약을 진행한 뒤 나타날 수도 있습니다. 어느 지점에서 시작하든 사용자가 왜 로그인해야 하고 완료 후 어디로 이동하는지 이해해야 합니다.

Part1: 로그인 페이지 디자인 어떻게 할까?

1. 어떤 디자인이 좋은 로그인 페이지 디자인?

로그인 화면 디자인은 매끄럽고 직관적이며 사용하기 편해야 합니다. 기본 로그인 수단, 계정 복구, 회원가입의 역할을 구분하고 필요한 항목부터 보여 주세요. 브랜드의 색상과 분위기를 유지하되, 장식 때문에 입력란이나 오류 안내가 묻히지 않아야 합니다. 신규 회원 전환이나 재방문 증가를 화면의 모양만으로 보장할 수는 없습니다.

2. 제작 단계

웹사이트의 목적과 사용자의 진입 경로를 먼저 정한 뒤 로그인 화면을 구상합니다. 이메일과 비밀번호를 쓰는지, 외부 계정이나 조직 계정을 쓰는지에 따라 필요한 필드와 복구 방법이 달라집니다. 브랜드에 맞춰 색상과 크기를 정하고 PC와 모바일에서 입력, 제출, 실패, 복귀를 각각 검토하세요. 두 화면이 똑같이 보이는 것보다 같은 작업을 끝낼 수 있는지가 중요합니다.

예를 들어 도예 수업 예약 서비스에서 지민이 ‘토요일 오전 수업’을 고른 뒤 로그인을 요청받았다고 해 보겠습니다. 제목은 ‘예약을 계속하려면 로그인해 주세요’, 기본 버튼은 ‘로그인하고 예약 확인’으로 정합니다. 이 단계에서 로그인은 예약 확정이 아닙니다. 인증 후 선택한 수업으로 돌아가 현재 예약 가능 여부를 다시 보여 주고, 사용자가 마지막 확인을 하게 합니다.

진입 전에 선택한 수업과 인원을 유지할지, 자리가 없어지면 어디서 다시 선택할지도 함께 정해야 합니다. 비밀번호를 찾다가 돌아온 사람을 홈페이지로 보내면 인증 자체는 성공해도 예약 작업은 끊깁니다. 디자인 파일에는 로그인 전후의 화면을 나란히 놓고 복귀 목적지를 표시해 두세요.

3. 예쁜 로그인 페이지 디자인

사용자가 로그인을 찾아 헤매지 않도록 진입점을 분명히 하세요. 로그인 화면 안에서는 무엇을 입력하고 어떤 버튼을 누르면 되는지 쉽게 알아볼 수 있어야 합니다. 다음 화면 사례에서는 현재 서비스의 기능 목록보다 입력란, 주요 버튼, 복구 링크가 어떻게 구분되어 있는지 살펴보겠습니다.

Kakao 로그인 화면 사례입니다. 브랜드를 연상시키는 노란색 버튼과 계정 입력 영역이 구분되어 있고, 계정 찾기와 비밀번호 찾기 같은 보조 경로가 아래에 모여 있습니다. 어떤 계정으로 들어갈 수 있는지 안내 문구가 입력을 돕습니다. 여기서 가져올 원칙은 모든 요소를 가운데에 놓는 것이 아니라, 주요 로그인 방식과 도움 경로의 우선순위를 읽을 수 있게 만드는 것입니다.

인스타그램의 화면 사례에서는 계정 정보 입력과 로그인 버튼이 한 영역에 놓이고, 다른 로그인 방법과 비밀번호 복구, 가입 경로가 구분되어 있습니다. 로그인과 가입이 같은 동작처럼 보이지 않는지, 복구 링크를 누른 뒤 되돌아올 수 있는지 자신의 서비스에 대입해 보세요. 이런 화면 구성은 참고할 수 있지만 이미지에 보이는 제공자를 모두 지원할 필요는 없습니다.

Part2: 로그인 화면 디자인할 때 꼭 지켜야 하는 원칙&주의점

명확성

웹 로그인 화면에서는 입력란 위에 ‘이메일’, ‘비밀번호’처럼 사라지지 않는 레이블을 두고, 필수 행동을 쉽게 찾게 합니다. 입력 중에는 필드가 빈 것인지, 처리 중인지, 다시 입력해야 하는지 구분되어야 합니다. 오류가 생겼을 때 빨간 테두리만 추가하지 말고 무엇을 할 수 있는지 문장으로 설명하세요.

로그인과 회원가입 버튼의 역할을 구분할 때는 사용자의 다음 행동을 돕는 CTA 버튼 설계를 참고해 버튼 문구와 시각적 우선순위가 다음 단계를 명확히 안내하는지 확인해 보세요.

올바른 용어 사용

‘로그인’, ‘회원가입’, ‘비밀번호 찾기’처럼 익숙한 용어를 일관되게 사용하세요. 이미 계정이 있는 사람과 새로 만드는 사람을 같은 버튼으로 안내하면서 결과를 숨기면 혼란이 생깁니다. 이메일을 계정 식별자로 쓴다면 ‘아이디’만 적기보다 ‘이메일’이라고 명시합니다. 다른 화면에서도 같은 이름을 써야 브라우저 자동완성과 안내 내용을 함께 이해하기 쉽습니다.

소셜 로그인 사용

소셜 로그인은 서비스가 실제로 제공하는 계정 선택지 가운데 하나입니다. 대상 사용자가 쓰는 제공자인지, 기존 계정과 어떻게 연결되는지, 제공자에서 취소했을 때 어떻게 돌아오는지에 따라 유용성이 달라집니다. 소셜 미디어 이용률만으로 모든 서비스에 필수라고 정하거나, 로고를 넣으면 신뢰가 생긴다고 단정하지 마세요.

위의 과거 구성 예시는 제공자별 버튼을 구분하는 방식을 보여 줍니다. 현재 지원 대상을 정하는 목록으로 쓰지는 마세요. 예약 예시에서 외부 계정 창을 닫으면 ‘로그인이 취소되었습니다. 다른 방법으로 계속할 수 있습니다’라고 안내하고 원래 로그인 화면으로 돌아옵니다. 연결이 끊긴 경우에는 취소와 다른 메시지를 보여 줍니다. 단순히 다른 제공자를 고르는 행동으로 별도 계정을 자동 생성하거나 기존 계정과 임의로 합치지 않도록 연결 정책도 정의해야 합니다.

계정 기억과 로그인 상태 유지 구분

위 Google 화면은 계정 선택 사례입니다. 이름이 목록에 남아 있고 ‘Signed out’으로 표시된 계정은 다시 선택할 수 있지만, 그 사실만으로 로그인이 유지되거나 비밀번호가 저장되어 있다는 뜻은 아닙니다. ‘이메일 기억하기’, ‘로그인 상태 유지’, 브라우저의 비밀번호 저장은 서로 다른 기능으로 설명해야 합니다.

공용 PC에서도 쓰는 예약 서비스라면 로그인 유지 선택의 의미와 해제 방법을 가까이 설명하세요. 로그인 유지 기간과 민감한 작업에서의 재인증 여부는 서비스의 보안 정책에 맞춰 결정합니다. NIST 인증 지침(영문)도 세션 관리와 비밀번호 관리자의 사용을 별개로 다룹니다. 디자이너가 ‘기억하기’ 체크박스 하나로 비밀번호 저장 방식이나 무기한 세션을 약속해서는 안 됩니다.

비밀번호 표시

로그인과 회원가입 모두에서 사용자가 입력한 비밀번호를 필요할 때 확인할 수 있도록 ‘비밀번호 보기’를 제공할 수 있습니다. 기본 상태는 숨김으로 두고, 누르면 ‘비밀번호 숨기기’로 바뀌도록 설계하세요. 아이콘만 사용하는 경우에도 보조 기술이 읽을 수 있는 이름이 필요합니다. 토글을 눌렀다고 폼이 제출되거나 입력한 값이 사라지지 않아야 합니다.

GOV.UK 비밀번호 입력 컴포넌트(영문)는 보기·숨기기, 자동완성, 붙여넣기를 함께 다룹니다. 구현 시 로그인에는 현재 비밀번호를 뜻하는 자동완성 목적을 전달하고, 사용자가 비밀번호 관리자에서 붙여넣는 행동을 막지 마세요. WCAG의 접근 가능한 인증 설명(영문)도 기억이나 수동 옮겨 적기에만 의존하지 않도록 돕는 방법을 제시합니다. 프로토타입에서 버튼 모양을 확인하는 일과 실제 브라우저에서 자동완성이 작동하는지 확인하는 일은 구분해야 합니다.

예약을 이어 가는 오류와 복구 문구

지민이 계정 정보를 잘못 입력한 경우와 서버 연결이 끊긴 경우는 해결 방법이 다릅니다. 계정 유무를 드러내지 않는 인증 실패 안내와, 입력 내용 자체의 오류 안내도 구분하세요. 빈 필드에는 무엇을 입력할지 구체적으로 말할 수 있지만, 인증 응답으로 존재하는 이메일을 알려 줄 필요는 없습니다. OWASP 인증 가이드(영문)는 계정 존재 여부가 드러나는 응답의 위험을 설명합니다.

실패 후 이메일까지 매번 지우면 수정해야 할 부분을 찾기 어렵습니다. 반면 비밀번호를 복구 링크나 주소에 넣어 다음 화면으로 전달해서는 안 됩니다. 이 예시에서는 실패 뒤 비밀번호를 비우고 재입력 또는 자동완성을 허용합니다. 재설정 메일을 요청했다는 표시와 실제 비밀번호 변경 완료도 별개로 보여 주세요.

로그인 요청 중에는 ‘로그인 중’처럼 진행 상태를 보여 주고 같은 제출이 반복되지 않게 합니다. 서비스가 인증 완료를 확인한 뒤에만 예약 확인 화면으로 이동하세요. 성공 화면에서 자리가 없어졌다면 로그인 오류로 돌리지 말고 수업을 다시 고를 수 있게 안내합니다. 인증과 예약 재고는 서로 다른 상태입니다.

Pixso에서 예약 복귀 경로까지 연결하기

Pixso 캔버스에 ‘수업 선택’, ‘로그인’, ‘인증 실패’, ‘재설정 안내’, ‘예약 확인’ 프레임을 만드세요. 로그인 필드와 버튼을 재사용 가능한 컴포넌트로 정리하고 오류 문구가 추가되었을 때 간격이 유지되도록 Auto Layout을 적용합니다. ‘로그인하고 예약 확인’과 ‘비밀번호 찾기’를 서로 다른 목적지에 연결하면 두 경로의 차이를 검토할 수 있습니다.

예약 확인 프레임에는 처음 고른 ‘토요일 오전 수업’을 똑같이 넣으세요. 재설정 안내에서 돌아오는 링크와 외부 로그인 취소 경로도 연결합니다. Pixso 프로토타입과 미리보기에서 화면 전환을 따라가며 복귀 위치를 논의하고, 실제 인증과 메일 발송은 애플리케이션 구현 항목으로 남깁니다.

참여자에게 ‘선택한 수업을 예약하려는데 비밀번호가 기억나지 않습니다’라는 과업을 주세요. 어느 버튼을 찾는지, 안내를 읽고 돌아올 수 있는지, 마지막 화면을 예약 확정으로 오해하지 않는지 살펴봅니다. 모바일에서는 키보드가 열린 상태에서도 오류 안내와 복구 링크를 찾을 수 있는지 별도로 확인하세요. 화면 옆에 남기는 코멘트는 ‘더 깔끔하게’보다 ‘재설정 후 선택한 수업이 보이지 않음’처럼 구체적이어야 합니다.

Part3: 마무리

로그인 페이지 디자인은 PC와 모바일에서 사용자가 계정을 확인하고 원래 목적을 이어 가도록 도와야 합니다. 명확한 입력란과 용어, 필요한 로그인 방식, 비밀번호 보기뿐 아니라 실패와 복구 이후의 목적지까지 함께 설계해 보세요. 예약 확인으로 돌아온 사용자가 선택한 수업을 알아볼 수 있다면 로그인 화면과 서비스 흐름이 제대로 연결된 것입니다.