한국어
코드에서 캔버스로: Logto가 로그인 경험 디자인의 오픈 소스를 만듭니다
우리는 포괄적인 인증 흐름 설계와 다양한 스타일 및 구성 요소를 포함하여 로그인 경험 Figma 리소스를 대중에게 공개했습니다.
Ran
Product & Design
Product & Design
우리는 포괄적인 인증 흐름 설계와 다양한 스타일 및 구성 요소를 포함하여 로그인 경험 Figma 리소스를 대중에게 공개했습니다.
Logto에서는 협력과 투명성의 힘을 믿습니다. 그래서 우리는 Figma에서 우리의 로그인 경험 디자인을 오픈 소스로 만들고 모든 사람이 사용할 수 있도록 했다는 것을 기쁘게 알려드립니다. Figma 리소스를 액세스하려면:
이 디자인에는 두 가지 주요 구성 요소가 포함되어 있습니다: 인증 흐름 (로그인 경험)과 스타일 & 구성 요소. 각각을 자세히 살펴보겠습니다.
우리는 모바일 및 PC 플랫폼 모두에 대한 다양한 회원가입, 로그인 및 첫 번째 소셜 로그인 시나리오 조합을 정교하게 설계했습니다. 각 시나리오는 해당하는 콘솔 구성과 함께 제공되어, 인증 흐름에 대한 포괄적인 개요를 제공합니다. 다음은 일부 시나리오의 미리보기입니다:
| 회원가입 | 로그인 | 첫 번째 소셜 로그인 | |
|---|---|---|---|
| 사용자 이름 | 사용자 이름 + 비밀번호 | 사용자 이름 + 비밀번호 | 소셜 로그인 + 사용자 이름 설정 |
| 이메일 (가장 인기 있는) | 이메일 + 인증 코드 + 비밀번호 | 이메일 + 비밀번호 | 소셜 로그인 + 이메일 연결 |
| 전화번호 | 전화번호 + 인증 코드 | 전화번호 + 인증 코드 | 소셜 로그인 + 전화번호 연결 |
| 이메일과 전화 혼합 | 이메일/전화번호 + 인증 코드 + 비밀번호 | 이메일/전화번호 + 인증 코드/비밀번호 | 소셜 로그인 + 이메일/전화번호 연결 |
| 소셜 로그인만 | / | / | 소셜 로그인만 |
| 비밀번호 찾기 | |
|---|---|
| 이메일과 전화 혼합 | 이메일/전화번호를 인증하여 비밀번호 재설정 |
우리의 디자인은 또한 로그인 경험의 전체 UI를 쉽게 사용자 정의할 수 있는 간단하고 다재다능한 스타일 및 구성 요소 세트를 포함합니다. 여기서 무엇을 찾을 수 있는지 살펴보세요:
| 소개 | |
|---|---|
| 글꼴 스타일 | 본문, 레이블, 제목 및 헤드라인과 같은 범주로 글꼴 분류를 단순화했습니다. 모바일 및 PC 플랫폼 모두에 동일한 글꼴 스타일이 사용되어 일관성과 사용 편의를 보장합니다. |
| 색상 스타일 | 팔레트와 토큰을 사용하면 테마 색상을 브랜드에 맞추어 쉽게 수정할 수 있습니다. 구글 머티리얼 디자인을 사용하여 생성된 우리 색상 팔레트는 라이트 모드와 다크 모드를 모두 제공하여 디자이너들이 쉽게 이해할 수 있도록 합니다. |
| 아이콘 | 바로 사용하거나 쉽게 교체할 수 있는 다양한 사례를 다루는 기능성 아이콘의 큐레이션된 컬렉션을 포함하고 있습니다. 추가로 소셜 로그인 버튼을 위한 다양한 소셜 미디어 아이콘도 제공합니다. |
| 구성 요소 | 모바일 및 웹 플랫폼 모두에 대한 구성 요소를, 브랜딩, 버튼, 체크박스, 대화상자, 내비게이션, 토스트, 텍스트 필드 및 키보드(모바일) 포함하여 정리했습니다. |
하지만 이게 전부가 아닙니다! Logto로, 위의 세부 정보를 넘어 원활한 통합 경험을 제공하기 위해 우리는 여러분을 믿습니다. Logto 콘솔에서 방법 구성 탐색과 브랜드 UI와의 매치를 손쉽게 할 수 있습니다. 몇 분 만에 당신의 비즈니스에 완벽히 맞춘 로그인 및 등록 경험을 가질 수 있습니다.
Logto는 항상 오픈 소스 코드 서비스를 제공하기 위해 전념해 왔지만, 왜 이 개방성을 디자인으로 확장했는지 궁금할 수 있습니다.
우리는 Logto가 개발자 친화적일 뿐만 아니라 PM과 디자이너들에게 최고의 친구가 되기를 원합니다. 우리는 전체 개발 과정에서 더 나은 협력을 촉진하여 높은 효율성, 투명성 및 신뢰를 줄 수 있다고 믿습니다.
Logto가 효율적인 클라우드 서비스 제공에 전념하고 있지만, 오픈 소스 커뮤니티에서 시작하여 장기적으로 공개적으로 투명한 상태로 남을 의도를 가지고 있습니다.
우리는 Logto 제품을 계속해서 반복하면서 Figma 디자인을 최신 상태로 유지할 것입니다. Logto를 활용하여 제품에 대한 예외적인 첫 번째 단계 경험을 만들고 브랜드에 오래 지속되는 인상을 남기기를 바랍니다.
우리는 당신의 경험과 피드백을 중요하게 생각하므로, 의사소통 채널을 열어 두십시오. 당신의 의견을 듣기를 기대합니다.