🌟 디테일의 간격 시리즈! [✏️ 회원가입 시 필수와 선택 항목 구분하기] (👀간단 요약) 📌 어떤 문제가? ✓ 디자이너와 업무를 진행하던 중에 필수 입력항목과 선택 입력항목의 디자인에 대해

🌟 디테일의 간격 시리즈! [✏️ 회원가입 시 필수와 선택 항목 구분하기] (👀간단 요약) 📌 어떤 문제가? ✓ 디자이너와 업무를 진행하던 중에 필수 입력항목과 선택 입력항목의 디자인에 대해 논의 ✓ 선택 입력항목 레이블을 회색 텍스트로 처리했는데, 선택 입력항목보다는 비활성화 느낌이 강하게 들어 수정 요청 ✓ 어떤 형태가 사용자들에게 자연스럽게 인지하게 되어 입력을 유도할 수 있게 하는지 궁금 📌 Placeholder와 유사한 색상 또는 디자인은 되도록 피하자 ✓ placeholder와 유사한 색상으로 레이블을 디자인하게 되면 혼란이 발생할 수 있음 ✓ 네이버와 티몬은 이에 대한 대안으로 placeholder와 색상은 유사하지만 텍스트 크기를 구분 ✓ 레이블과 선택 입력항목 레이블이 유사한 색상 또는 텍스트 굵기로 들어가게 되면 구분이 애매 📌 Placeholder에 선택 입력항목을 기입하는 것은 위험할 수 있다 ✓ placeholder에 (선택), (필수)를 함께 입력하여 구분한 서비스가 존재 ✓ placeholder는 텍스트를 입력하는 순간 사라지기 때문에 클릭 후 구분이 명확하지 않음 ✓ placeholder가 많으면 텍스트가 많기 때문에, 오히려 레이블 제공보다 입력에 대한 부담 ✓ 클릭 시 placeholder가 레이블로 변경되는 인터랙션을 활용한 형태로 대체하는 방법 📌 필수항목에 별도 체크를 해주자 ✓ 레이블에 아이콘 또는 (필수) 기재를 눈에 잘 띄는 다른 색으로 명확하게 표기해주는 방법 ✓ 사용자가 입력하기 전에 어떤 항목을 필수로 입력해야 하는지에 대해 명확하게 판단할 수 있음 ✓ 필수 입력항목보다는 선택 입력항목을 별도로 기재하는 것도 방법 📌 필수 입력항목과 선택 입력항목의 영역을 구분해주자 ✓ 선택 항목을 필수 항목이 끝난 후 제공함으로써 사용자에게 입력하고자 하는 선택권 제공 가능 ✓ 다만 서비스 입장에서는 선택 항목을 아예 제공 받지 못하는 상황으로 이어질 수 있음 ✓ 선택 입력항목을 입력하게 되면 받을 수 있는 혜택 등을 영역 상단에 명시해주는 방법 활용 (👋중요한 이유가 뭔가요?) 설마 잊어버리겠어? 설마 그러겠어? 라는 생각과 판단으로 기획을 한 적이 있어요. 플레이스 홀더 텍스트 역시 마찬가지! 회원가입은 아니었지만, 특정 행동에 필요한 정보를 수집할 때, 필수 여부를 플레이스 홀더 텍스트로 적용하고, 필수값 누락에 대한 안내를 확인 버튼을 탭 했을 때로 지정해 사용자들의 피드백이 여럿 들어왔었는데요. 본문에서 이런 고민과 답을 단계적으로 잘 정리해준 것 같아 코멘트를 작성하게 되었어요. 필수 항목과 선택 항목을 어떻게 구분해야 하는지, 한 번 클릭하면 사라지는 가이드 문구를 어떻게 활용하면 좋을지 등에 대한 내용을 살펴보며 저와 같은 실수를 하지 않았으면 해요! (💌함께 읽어보세요!) ✓ 사용자를 화나게 하는 회원가입 UI : https://careerly.co.kr/comments/19079 ✓ 검색창 내 플레이스 홀더 사용 방법 : https://bit.ly/3cDAtZT