디자인카타8 [내일배움캠프] Day 36 - 디자인 카타 - 모달, 팝업, 스낵바, 시트 1. 모달(Modal)🔸 정의모달은 사용자의 현재 작업을 중단시키고, 중요한 정보를 제공하거나 사용자 결정(확인, 취소 등)을 유도하는 컴포넌트화면의 중앙에 배치되어 사용자의 주의를 집중시키며, 사용자 입력이나 피드백을 요구. 모달이 열리면 배경 화면은 블러 처리되거나 비활성화됨🔸 기능필수 사용자 입력: 중요한 정보 전달, 사용자의 선택 필요집중도 향상: 오직 한 가지 행동을 요구하여 사용자의 주의를 집중배경 상호작용 제한: 모달이 닫히기 전까지 배경과 상호작용 불가🔸 사용 시점데이터 삭제, 저장과 같은 중요한 결정을 요구할 때사용자 로그인/회원가입 폼앱 사용 중 중대한 경고나 에러 알림🔸 Figma 디자인 팁레이어 순서를 명확히 하여 모달이 상단에 위치하도록 설정블러 효과나 다크 오버레이로 배경.. 2025. 3. 14. [내일배움캠프] Day 24 - 디자인카타 (페이지네이션과 무한스크롤, 각각 어떤 의도를 가지고 있을까요?) [주제] 📊 페이지네이션 vs 무한스크롤 언제, 왜 사용할까?웹사이트나 앱을 설계할 때 가장 고민되는 요소 중 하나가 바로 콘텐츠 탐색 방식특히 페이지네이션(Pagination)과 무한스크롤(Infinite Scroll)은 각각 다른 사용자 경험을 제공함 📖 페이지네이션 (Pagination) : 사용자의 "통제"와 "명확성"을 위한 선택 ✅ 의도페이지네이션은 콘텐츠를 명확히 구분하고 사용자가 원하는 위치로 쉽게 이동할 수 있게 함사용자는 페이지 단위로 콘텐츠를 탐색하며, 전체 콘텐츠의 규모를 인지할 수 있음 🌟 장점콘텐츠 구조화: 사용자가 현재 위치와 전체 콘텐츠의 양을 쉽게 파악 가능탐색의 용이성: 특정 페이지로 바로 이동 가능 (예 : 3페이지로 건너뛰기)서버 부담 완화: 초기 로딩이 적어 퍼.. 2025. 2. 25. [내일배움캠프] Day 19 - 디자인카타 (인스타 스토리 투표 UI, 어떤 쪽을 더 선호하시나요? 이유는 무엇인가요?) [주제] [선택과 이유] 나의 선택은 B이다.업데이트를 하면서 단순한 색상을 사용하여 UI가 깔끔해졌고, 가독성이 좋아졌다그리고 결과값을 나눠서 보여주는 것이 투표 결과가 50:50에 가까운 경우 한 막대 안에서 보여주는 것보다 비교가 명확해졌고, 사용자가 불필요한 색상 정보 없이 결과를 빠르게 인식 가능해졌다. ✅ 업데이트 전 투표 UI: 한 막대 그래프 안에 표현 + 여러 색상 사용장점:명확한 비교한 막대 안에서 두 결과값을 바로 비교할 수 있어 직관적다양한 색상으로 시각적인 구분이 뚜렷해 가독성이 높음시각적 흥미여러 색상은 시각적으로 더 매력적이며, 사용자의 주목을 끌기 쉬움공간 효율성한 막대 안에 정보가 집약되어 있어 스토리의 화면을 효율적으로 사용할 수 있음단점:복잡한 시각 요소색상이 많아질수.. 2025. 2. 18. [내일배움캠프] Day18 - 디자인카타(식기세척기 동작 버튼, 어느 쪽에 위치하는 것이 더 편할까요?) [주제] [선택과 이유] 나의 선택은 B이다처음에는 사용 버튼이 식기세척기 내부에 있다고 이해해서 내부에 버튼이 있다는 것이 이해가 되지 않아서 실제로 그런 모델들이 있는지 찾아봤는데 문 안쪽으로 위치한 제품들은 없었고, 문 상단에 위치하거나 문 앞쪽 상단에 위치하는 것이 대부분이었다.그래서 이 두가지로 비교를 했다. 문 상단에 위치하는 경우에는 빌트인시키면 문을 열어야만 작동을 할 수 있는데 매번 문을 열고 조작을 해야한다는 단점이 있고, 디자인이 깔끔하고 실수로 버튼을 누를 가능성이 낮다는 장점이 있다 문 앞쪽에 위치파는 경우에는 아이들이 쉽게 조작할 위험이 있다는 단점이 있고, 문을 닫은 상태에서도 버튼을 조작할 수 있고, 현재 작동 상태를 쉽게 확인 가능하다는 장점이 있다. 디자인이 깔끔하고, 실.. 2025. 2. 17. [내일배움캠프] Day17 - 3주차 WIL + 디자인카타 (혜택 유도를 위한 팝업 어떤 것을 선택하시겠어요?) [주제] [선택과 이유] 제 선택은 A입니다.하단에 위치해서 손으로 조작하기 쉬워 모바일에서 사용하기 좋아 보이고, 팝업에 나타내야 할 정보량이 많다면 더 사용하기 좋을 것 같습니다.사실 두가지 다 큰 불편함은 없어 보이는데, 굳이 고르자면 모바일 사용이라는 전제하에 A를 골랐습니다. 다이얼로그의 위치 1. 화면 중앙 (Center Dialog)가장 전통적이고 기본적인 다이얼로그 위치사용자가 작업을 중단하고 메시지에 즉각적으로 집중해야 할 때 사용 적합한 경우:긴급하거나 주목도가 높은 메시지 전달확인/취소와 같은 즉각적인 의사결정을 요구할 때모달 다이얼로그(Modal Dialog)가 일반적으로 이 위치를 사용예시:"정말 삭제하시겠습니까?""로그인 후 사용할 수 있습니다.""앱을 종료하시겠습니까?"장점.. 2025. 2. 14. [내일배움캠프] Day 16 - 디자인카타 (마이페이지에 프로필 사진 유무, 어떤 차이가 있을까요?) [주제] [선택과 이유] 나의 선택은 A.우선 시선이 바로 가서 선택하게 되었는데, 단조로운 텍스트 기반의 화면보다 프로필 사진이 추가되면 페이지가 더 풍부하고 생동감 있게 보이는 것 같다 A와 B 디자인은 서비스의 성격에 따라 사용 여부가 달라질 수 있을 것 같다 A는 SNS 같이 사용자의 정체성이나 개성을 보여주는 것이 중요한 서비스에서 사용하기 좋을 것 같고, 사용자 신원 확인이 용이해 소셜 서비스, 이커머스, 커뮤니티 등에서 신뢰도를 높이는 데에 도움이 될 것 같다 B같은 경우는 간결한 디자인으로 텍스트 기반의 미니멀한 디자인을 유지할 수 있어 깔끔하고 단순한 레이아웃 구현이 가능하고, 익명성 보장 사용자가 자신을 노출하지 않고도 플랫폼을 이용할 수 있어 블라인드같은 익명성이 중요한 서비스에서 .. 2025. 2. 13. 이전 1 2 다음 728x90 반응형 LIST
