docs: 회원 가입 플로우를 위한 5가지 모범 사례(예시와 함께!) 번역

Wannabe-Woowa-Article · Jun 11, 2024 · ce57f8c · ce57f8c
1 parent 18ee005
commit ce57f8c
Showing 1 changed file with 116 additions and 0 deletions.
diff --git a/June/article/5-Best-Practices-for-the-Sign-up-Flow-with-examples.md b/June/article/5-Best-Practices-for-the-Sign-up-Flow-with-examples.md
@@ -0,0 +1,116 @@
+## 🔗 [5 Best Practices for the Sign-up Flow (with examples!)](https://medium.com/prototypr/5-best-practices-for-the-sign-up-flow-with-examples-f55832edc8a3)  
+### 🗓️ 번역 날짜: 2024.06.11
+### 🧚 번역한 크루: 렛서(김다은)
+
+<br/>
+
+---
+
+# 회원 가입 플로우를 위한 5가지 모범 사례(예시와 함께!)
+
+어떻게 하면 더 나은 회원 가입 흐름을 설계할 수 있을까요? 모범 사례로 들어가 보겠습니다.
+
+![썸네일](https://miro.medium.com/v2/resize:fit:1400/format:webp/1*i-mVZoEC3KdwaW9iqO5yJw.png)
+
+<br/>
+
+## 1. 단순하게 만든다
+가입 양식에는 필수 정보만 입력해야 합니다. 제품에 이메일과 비밀번호 외에 추가 정보가 필요한 경우 가입 흐름을 여러 단계로 나눕니다.
+
+![나쁜 예시 - 한 번에 너무 많은 정보를 요구한다](https://miro.medium.com/v2/resize:fit:1400/format:webp/1*ybmI5wJnAEZZ8w0l32wHyA.png)
+
+<br/>
+
+위의 양식은 한 번에 너무 많은 정보를 요구합니다. 잠재적인 사용자는 복잡한 등록 양식을 완성하는 데 시간을 할애할 동기가 없습니다.
+
+<br/>
+
+![모범 예시 - 두 단계로 나누었습니다](https://miro.medium.com/v2/resize:fit:1400/format:webp/1*BKUOfAzTAOL2GolCWmk_GQ.jpeg)
+
+<br/>
+
+이 예시에서 계정을 만들려면 이메일과 암호 외에 추가 정보가 필요합니다. 따라서 가입 흐름은 두 단계로 나뉩니다. 이 접근 방식은 첫 번째 단계 이후에 사용자에게 완성도를 제공하고, 이는 사용자가 다음 단계를 완료하도록 동기를 부여합니다.
+
+<br/>
+
+![개선된 회원가입 폼과 유저 플로우](https://miro.medium.com/v2/resize:fit:1400/format:webp/1*6x5k0R62sQaqHbkYlX8u_w.png)
+
+<br/>
+
+이 가입 양식은 간단합니다. 이메일과 비밀번호만 요구합니다. 계정 생성에 필요하지 않은 기타 정보는 가입 완료 후 향후 온보딩 단계에서 요청할 수 있습니다.
+
+<br/>
+
+### 예시
+
+![에어비엔비 회원가입 절차](https://miro.medium.com/v2/resize:fit:1400/format:webp/1*rFLcR_qdc7szYxWILlwNRA.png)
+
+![Jira 회원가입 절차](https://miro.medium.com/v2/resize:fit:1400/format:webp/1*FHwyDTQdq5_ksAQ9BkIueQ.png)
+
+<br/>
+
+## 2. 소셜 로그인 제공
+
+소셜 로그인은 가입 절차를 더 빠르고 쉽게 만듭니다. 소셜 로그인을 사용하여 가입하면 이름과 이메일과 같은 다른 필수 정보를 자동으로 가져올 수 있습니다. 또한 사용자는 암호를 만들 필요가 없습니다.
+
+![소셜 로그인을 제공하지 않는 회원가입 폼](https://miro.medium.com/v2/resize:fit:1400/format:webp/1*qec4QUkeVGAyaCcum4xkBA.png)
+
+<br/>
+
+### 예시
+
+![회원가입 시 소셜 로그인을 제공하는 제품들](https://miro.medium.com/v2/resize:fit:1400/format:webp/1*huPpQx8wieO5sFiHQP9HGg.png)
+
+<br/>
+
+## 3. 비밀번호 필드에 대한 가이드 제공
+
+비밀번호 입력 필드 근처에 사용자가 비밀번호를 작성할 수 있도록 가이드를 표시하고, 사용자가 입력할 때 즉각적인 피드백을 제공합니다. 이를 통해 비밀번호를 작성하고 전체적인 가입 절차를 쉽게 진행할 수 있습니다.
+
+<br/>
+
+![입력 가이드가 없는 비밀번호 필드](https://miro.medium.com/v2/resize:fit:1400/format:webp/1*Bb-RFo_S9JOPL_C3XT9cFQ.png)
+
+<br/>
+
+![가이드와 유저의 입력에 따른 즉각적인 피드백을 제공하는 비밀번호 필드](https://miro.medium.com/v2/resize:fit:1400/format:webp/1*Okp3bEY1wn7qaAOUYyfgxw.png)
+
+<br/>
+
+### 예시
+
+![에어비앤비의 비밀번호 필드](https://miro.medium.com/v2/resize:fit:1400/format:webp/1*LDv7-D0zuvOS7dGgWPN8gA.png)
+
+<br/>
+
+![스포티파이의 비밀번호 필드](https://miro.medium.com/v2/resize:fit:1400/format:webp/1*W6snLrx-ssp2lyDPc26D0A.png)
+
+<br/>
+
+## 4. 비밀번호를 확인할 수 있도록 하기
+
+입력한 암호를 보여주는 옵션을 제공하여 사용자는 입력을 확인할 수 있으므로 오류를 입력할 가능성이 줄어듭니다.
+
+![비밀번호를 확인할 수 없는 필드](https://miro.medium.com/v2/resize:fit:1400/format:webp/1*pAZ7clw1rOHwa-nDTEDhYQ.png)
+
+<br/>
+
+![구글과 링크드인의 비밀번호 필드](https://miro.medium.com/v2/resize:fit:1400/format:webp/1*8zLwyB75qiJXRwOYxYkg1Q.png)
+
+<br/>
+
+## 5. 명로하고 자세한 에러 메세지 제공
+
+사용자가 입력 필드에 잘못 입력했거나 필수 필드를 놓쳤을 때 오류 메시지에 오류가 발생한 위치와 해결 방법이 표시되어야 합니다. 그렇지 않으면 사용자는 어떤 정보가 잘못 입력되었는지, 왜 잘못 입력되었는지 추측해야 합니다.
+
+![에러 상태를 표시하는 나쁜 예시와 모범 예시](https://miro.medium.com/v2/resize:fit:1400/format:webp/1*c3nc7ECsEOvqNH1CLEw0kw.png)
+
+<br/>
+
+![Dropbox와 스포티파이의 회원가입 폼의 에러 메세지](https://miro.medium.com/v2/resize:fit:1400/format:webp/1*c3nc7ECsEOvqNH1CLEw0kw.png)
+
+<br/>
+
+---
+
+