[주제]

[선택과 이유]
제 선택은 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 최적화 팁
- 사용자 맥락을 고려하라: 상황과 사용자의 현재 동작을 분석해 방해가 최소화되도록.
- A/B 테스트를 수행하라: 중앙 다이얼로그, 바텀시트, 상단 배너 등 다양한 위치를 테스트하여 효과적인 위치를 확인.
- 모바일과 데스크톱을 구분하라: 모바일은 바텀시트, 데스크톱은 중앙 다이얼로그가 일반적으로 효과적.
- 시각적 대비를 높여라: 다이얼로그 내 메시지가 즉각적으로 이해될 수 있도록 명확한 레이아웃과 디자인을 사용.
✍️ WIL(Weekly I Learned)
성과
- 한 주 동안 나를 괴롭혔던 클론디자인! 을 할 수 있게 됐다
새롭게 배운 것
- 스택, 톡, 포지션, 팝업, 모달, 오버레이, 라이트박스, 다이얼로그 등
- 와이어 프레임은 어떻게 하는지, 클론디자인은 어떻게 하는 것이 효율적인지
- 컴포넌트 인터렉션, 오버레이 프로토타입, 드래그 프로토타입
이번 주에 공부하면서 가장 문제였던 점
이번 주의 가장 큰 문제는 뭐니 뭐니 해도 클론 디자인이었다
계속 해봐야 느는 거라고 하니 인내심을 갖고 꾸준히 해봐야겠다
다음 주 계획
다음 주에는 우선 개인과제에 집중할 예정이다.
클론디자인은 아니지만 최대한 과제에서 요구하는 것들을 구현해보려고 한다.
개인 과제가 끝나면 4주차 강의 과제를 마무리 할 계획이다
'내일배움캠프' 카테고리의 다른 글
[내일배움캠프] Day 19 - 디자인카타 (인스타 스토리 투표 UI, 어떤 쪽을 더 선호하시나요? 이유는 무엇인가요?) (0) | 2025.02.18 |
---|---|
[내일배움캠프] Day18 - 디자인카타(식기세척기 동작 버튼, 어느 쪽에 위치하는 것이 더 편할까요?) (0) | 2025.02.17 |
[내일배움캠프] Day 16 - 피그마 인터렉션 (0) | 2025.02.13 |
[내일배움캠프] Day 16 - 디자인카타 (마이페이지에 프로필 사진 유무, 어떤 차이가 있을까요?) (0) | 2025.02.13 |
[내일배움캠프] Day 15 - UI 디자인 심화 (1) | 2025.02.12 |