본문 바로가기
내일배움캠프

[내일배움캠프] Day17 - 3주차 WIL + 디자인카타 (혜택 유도를 위한 팝업 어떤 것을 선택하시겠어요?)

by 이응이응시옷 2025. 2. 14.
728x90

 

[주제]

 


 

[선택과 이유]

 

제 선택은 A입니다.

하단에 위치해서 손으로 조작하기 쉬워 모바일에서 사용하기 좋아 보이고, 팝업에 나타내야 할 정보량이 많다면 더 사용하기 좋을 것 같습니다.

사실 두가지 다 큰 불편함은 없어 보이는데, 굳이 고르자면 모바일 사용이라는 전제하에 A를 골랐습니다.

 


 

다이얼로그의 위치

 

1. 화면 중앙 (Center Dialog)

가장 전통적이고 기본적인 다이얼로그 위치

사용자가 작업을 중단하고 메시지에 즉각적으로 집중해야 할 때 사용

 

적합한 경우:

  • 긴급하거나 주목도가 높은 메시지 전달
  • 확인/취소와 같은 즉각적인 의사결정을 요구할 때
  • 모달 다이얼로그(Modal Dialog)가 일반적으로 이 위치를 사용

예시:

  • "정말 삭제하시겠습니까?"
  • "로그인 후 사용할 수 있습니다."
  • "앱을 종료하시겠습니까?"

장점:

  • 시각적 초점이 강함 (화면 중앙에 고정되어 사용자 주목도 높음)
  • 사용자에게 익숙한 UI 패턴
  • 짧고 명확한 메시지 전달에 적합

단점:

  • 사용자 흐름을 강하게 방해할 수 있음
  • 반복 사용 시 사용자 피로도가 증가할 수 있음

2. 화면 하단 (Bottom Dialog / Bottom Sheet)

모바일 환경에서 특히 추천되는 위치

사용자가 스크롤하거나 선택지를 확인하며 자연스럽게 상호작용할 수 있음

Google Material Design에서 바텀시트의 사용을 권장

 

적합한 경우:

  • 옵션 제공선택 유도가 필요한 상황
  • 추가 정보 제공이 필요한 상황 (정보량이 많을 때)
  • 사용자의 흐름을 덜 방해하는 방식이 필요한 경우

예시:

  • "배송 방법을 선택하세요."
  • "할인 쿠폰을 선택하세요."
  • "결제 수단을 선택하세요."

장점:

  • 모바일 친화적 (한 손 조작이 용이)
  • 사용자의 흐름에 부드럽게 연결
  • 확장성이 좋아 다양한 콘텐츠를 담을 수 있음

단점:

  • 중요도가 높은 메시지에서는 주목도가 다소 떨어질 수 있음
  • 스크롤이 필요할 때 사용자가 일부 정보를 놓칠 수 있음

3. 화면 상단 (Top Dialog or Banner-style)

화면 상단에 고정형 다이얼로그 형태로 표시

전체 시스템에 영향을 미치는 메시지를 전달할 때 적합

배너 형식의 다이얼로그로도 사용될 수 있음

 

적합한 경우:

  • 시스템 알림이나 상태 변화를 전달할 때
  • 페이지 전체와 관련된 정보 제공
  • 긴급 상황 메시지

예시:

  • "네트워크 연결이 끊어졌습니다."
  • "서버 오류가 발생했습니다."
  • "무료 배송 이벤트 진행 중!"

장점:

  • 페이지 컨텍스트와 자연스럽게 어우러짐
  • 사용자의 흐름을 거의 방해하지 않음
  • 지속적인 노출이 가능 (배너형 메시지로 활용 가능)

단점:

  • 사용자가 무시할 가능성이 있음
  • 모바일 환경에서는 터치 범위가 좁음 (상단에 손이 닿기 어려움)

4. 인라인 다이얼로그 (Inline Dialog)

화면 내 특정 영역에 다이얼로그가 표시되는 인라인 스타일은 사용자 흐름을 유지하면서 정보를 제공할 때 사용

다이얼로그보다는 배너에 가깝지만 특정 요소를 강조할 수 있음

 

적합한 경우:

  • 정보성 메시지 전달
  • 페이지 내에서 특정 섹션과 관련된 정보 제공

예시:

  • 결제 페이지에서 "할인 코드 입력하기"
  • 상품 상세 페이지에서 "무료 배송 혜택 적용"

장점:

  • 흐름을 방해하지 않음
  • 자연스러운 인터페이스로 정보 제공 가능

단점:

  • 주목도가 낮음
  • 메시지 전달력이 약할 수 있음

5. 풀스크린 다이얼로그 (Full-screen Dialog)

전체 화면을 덮는 다이얼로그 형태로, 강력한 메시지 전달복합적 정보 제공에 사용

특히 모바일 환경에서 특정 작업 흐름을 완전히 전환할 때 사용

 

적합한 경우:

  • 중요한 기능 설명 또는 새로운 콘텐츠 소개
  • 가입 유도, 프로모션 이벤트

예시:

  • "회원 가입 시 20% 할인 혜택!"
  • "신규 기능 안내"
  • "설정 화면 이동"

장점:

  • 시각적 임팩트가 크고 주목도 높음
  • 복잡한 정보 전달에 적합

단점:

  • 강제성이 강해 사용자의 거부감이 생길 수 있음
  • 흐름이 크게 중단될 수 있음

 

UX 최적화 팁

  1. 사용자 맥락을 고려하라: 상황과 사용자의 현재 동작을 분석해 방해가 최소화되도록.
  2. A/B 테스트를 수행하라: 중앙 다이얼로그, 바텀시트, 상단 배너 등 다양한 위치를 테스트하여 효과적인 위치를 확인.
  3. 모바일과 데스크톱을 구분하라: 모바일은 바텀시트, 데스크톱은 중앙 다이얼로그가 일반적으로 효과적.
  4. 시각적 대비를 높여라: 다이얼로그 내 메시지가 즉각적으로 이해될 수 있도록 명확한 레이아웃과 디자인을 사용.

 

✍️ WIL(Weekly I Learned)

성과

  • 한 주 동안 나를 괴롭혔던 클론디자인! 을 할 수 있게 됐다

새롭게 배운 것

  • 스택, 톡, 포지션, 팝업, 모달, 오버레이, 라이트박스, 다이얼로그 등
  • 와이어 프레임은 어떻게 하는지, 클론디자인은 어떻게 하는 것이 효율적인지
  • 컴포넌트 인터렉션, 오버레이 프로토타입, 드래그 프로토타입

이번 주에 공부하면서 가장 문제였던 점

이번 주의 가장 큰 문제는 뭐니 뭐니 해도 클론 디자인이었다

계속 해봐야 느는 거라고 하니 인내심을 갖고 꾸준히 해봐야겠다

 

다음 주 계획

다음 주에는 우선 개인과제에 집중할 예정이다.

클론디자인은 아니지만 최대한 과제에서 요구하는 것들을 구현해보려고 한다.

개인 과제가 끝나면 4주차 강의 과제를 마무리 할 계획이다

 

728x90