본문 바로가기
UXUI/디자인 카타

[디자인 카타] 하나의 정보 입력 완료 방식, A와 B는 각각 어떤 장단점이 있을까?

by yeon jeong 2025. 7. 17.
728x90

 

1. 주제 선정

 

가이드 텍스트 위치 어디에 노출하는 것이 더 유용할까?

 

2. 개인 의견

 

왜 해당 UI가 더 좋은지?

  • 사용자 흐름: 사용자는 일반적으로 화면을 위에서 아래로 읽기 때문에 상단에 먼저 주목한다. 중요한 안내나 조건을 상단에 고정시켜서 노출시키면 입력 전에 먼저 인지할 수 있다.
  • 실수 예방: 입력 전 필요한 정보를 미리 확인할 수 있어서 실수를 줄일 수 있다.

 

나머지 하나는 왜 선택하지 않았는지?

  • 사용자 인식: 입력 완료 후 CTA에 가이드 문구가 포함되면, 사용자는 이를 단순 이동 버튼으로 인식할 가능성이 높다.
  • 번거로운 수정 과정: 입력 후에야 조건을 확인하게 되고 번거로운 수정 과정을 거쳐야 할 수 있다.
  •  

 

의견을 뒷받침할 수 있는 사례

  • 회원 가입 페이지에서의 → 최소 N 글자 이내 입력해주세요, 특수 문자를 포함해주세요, …

 

3. 공통의견
팀원 모두 [가이드 영역에 별도 표기] 선택

 

B 라디오 버튼을 선택한 이유

  • 가이드 텍스트의 역할 수행
  • 실수 방지
  • 사용자 시선에 따른 정보의 흐름 인지

 

A 슬라이더를 선택하지 않은 이

  • 단순 버튼으로 인식
  • 사용자의 혼란

 

결론

  • 사용자의 원활한 흐름과 혼란 방지를 위한 기능수행적 관점에서 가이드 텍스트 본연의 목적을 제대로 수행하기에 가이드 영역에 별도로 표기하는 것이 더 적합한 UI 요소로 판단된다.

기억에 남는 팀원들 의견

  • 가이드라인은 상대적으로 적은 비중을 차지해야 오히려 그 역할이 더 분명하게 드러난다.
    ▶️ 화면에서 주목을 덜 받는 위치에 배치되어야 사용자의 시선을 방해하지 않으면서도, 필요한 정보를 적절히 전달할 수 있다는 점에서 설득력이 있었다.
  • 버튼의 컬러가 회색조로 되어 있어 사용자가 이 버튼이 활성화된 상태인지 인지하기 어려울 수 있다.
    ▶️ 색상만으로 상태를 구분하기보다는, 시각적 힌트를 더해 버튼의 상태를 명확히 전달하는 것이 중요하다는 점에서 공감이 갔다.
  • CTA 는 단순하고 명확해야 한다. 
    ▶️ 사용자가 다음 단계로 자연스럽게 넘어갈 수 있도록 돕는 흐름은 좋은 예시라고 생각한다.