분류 전체보기51 [UX 스터디] 아코디언 UI의 활용법을 알아보자 접었다 폈다하며 오묘한 소리를 내는 아코디언! 웹/앱 기획할 때도 자주 듣는 용어지요?아코디언 UI는 화살표(▼)를 클릭해 접고 펼칠 수 있는 동적 요소로, 접힌 상태에서 제목과 같은 핵심 정보를 먼저 확인하고 필요할 때 펼쳐서 추가 내용을 확인할 수 있게 해줍니다. 오늘은 아코디언 UI의 주요 사용처와 장점, 주의점을 소개하겠습니다. 주요 사용처 아코디언 UI는 FAQ, 공지사항, 대댓글 등 어떤 목록이 있고, 각 항목의 내용이 길지 않은 경우 유용한데요, 사용자가 전체 목록을 빠르게 스캔하고, 관심 있는 부분만 자세히 볼 수 있기 때문입니다. 그럼 사례를 통해 더 자세히 들여다보도록 하겠습니다. 당근의 경우에는 견적 요청 카테고리별 상세 옵션을 펼쳤을 때 제공하고 있습니다. 필요한 카테고리만 펼쳐서 .. 2024. 9. 9. [UX 스터디] 카카오뱅크에서 예금을 소개하는 방법 안녕하세요, 예금 UX스터디 3번째 포스팅입니다. 지난 포스팅에서 토스와 케이뱅크의 예금 페이지를 살펴보았다면, 오늘은 마지막으로 카카오뱅크를 탐험해 보겠습니다. [UX 스터디] 토스에서 예금을 소개하는 방법안녕하세요, 여러분! 이번에는 예금 상품의 상세 페이지에 대한 UX 스터디 시리즈를 준비해 보았습니다. 첫번째 시간은 토스입니다. '금융업의 혁신'을 이끌고 있다고 평가 받는 토스, 예금 상품smoothwork.tistory.com [UX 스터디] 케이뱅크는 예금을 어떻게 소개하고 있을까?안녕하세요, 여러분! 오늘도 지난 시간에 이어서 예금 상품 페이지의 UX를 스터디 해보려고 합니다. 이번에는 어떤 은행이냐? 인터넷은행이지만 어쩐지 시중은행과도 닮은 구석이 많은, 케이뱅smoothwork.tisto.. 2024. 9. 3. [Figma] 복잡한 피그마 파일 정리, 이렇게 해보자 UX 디자이너의 소울 메이트, Figma. 바쁜 프로젝트 일정에 쫓기다가 문득, Figma 폴더가 혼돈의 카오스로 변해 있는 것을 발견한 적 있으신가요? 이 복잡한 혼돈의 파일 더미에 어떻게 질서를 부여할 수 있을까요? UX 디자인 작업은 많은 자료와 아이디어가 얽혀 있는 복잡한 과정입니다. 그래서 파일 구조를 명확히 하고, 필요한 자료를 적절히 분류하면필요한 걸 찾는 데 시간이 덜 걸리고,작업할 때 훨씬 효율적이고,팀원들과도 훨씬 매끄럽게 소통할 수 있어요. 그래서 이번 글에서는 Figma 파일을 체계적으로 정리하는 방법을 소개해보겠습니다. 피그마 파일을 어떻게 분류하고, 각 항목별로 어떤 내용이 포함되어야 하고, 왜 해당 분류가 필요한지 설명드리겠습니다. (보시기 쉽게 표로 한방에 정리했어요)항목내용.. 2024. 8. 16. [UX 스터디] 케이뱅크는 예금을 어떻게 소개하고 있을까? 안녕하세요, 여러분! 오늘도 지난 시간에 이어서 예금 상품 페이지의 UX를 스터디 해보려고 합니다. 이번에는 어떤 은행이냐? 인터넷은행이지만 어쩐지 시중은행과도 닮은 구석이 많은, 케이뱅크입니다. 케이뱅크는 예금을 어떻게 소개하고 있을까요?1. 진입 경로‘상품’이라는 말 대신 ‘발견’이라는 용어를 사용하고 있는 점이 특이함 2. 인트로 기본 정보 상품의 특징을 1줄로 요약하고 상품명과 조합 금리, 금액, 기간 등 가장 기본적인 정보를 강조해서 정리 이자 계산 고객이 직접 금액, 기간을 바꿔볼 수 있는 UI 제공 토스보다는 덜 직관적이지만 어쨌든 고객의 흥미나 참여를 유도하는 인터랙티브한 요소 이자 정보 강조 3. 핵심 포인트 이미지 활용 X 오로지 텍스트로만 핵심 포인트 4가지 소개 특정 부분을 형광초록.. 2024. 8. 13. [UX 스터디] 토스에서 예금을 소개하는 방법 안녕하세요, 여러분! 이번에는 예금 상품의 상세 페이지에 대한 UX 스터디 시리즈를 준비해 보았습니다. 첫번째 시간은 토스입니다. '금융업의 혁신'을 이끌고 있다고 평가 받는 토스, 예금 상품을 어떻게 소개하고 있을까요? 바로바로 들어가보겠습니다. (스크롤이 조금 깁니다!) 토스 예금 상세 페이지 태그라인 - 상품의 핵심 특장점을 마치 광고 캐치 프레이즈처럼 임팩트 있게 소개한다 - 고객이 받을 수 있는 혜택을 강조한다. (먼저 받는 이자!) 핵심 포인트 4가지 - 예금 상품의 4가지 주요 안내 사항을 카드 형식으로, 최소한의 텍스트와 이미지로 구성했다. - 4가지 특징 모두 고객이 받을 수 있는 이득에 집중했다. → 상품 가입 설득력 UP 이자를 언제 주는지 : 보관하자마자 보관 기간, 이자가 얼만지 .. 2024. 8. 8. UX/UI 스터디 : 모달/팝업의 다시 보지 않기 버튼 구성 앱을 실행하면 종종(아니 자주) 이벤트 팝업이 뜨고, 다시 볼 건지 말건지를 선택하는 기로에 섭니다. 다시 보지 않기를 선택하지 않으면 앱을 실행할 때마다 이벤트 팝업을 봐야 하는 고통(?)에 시달리게 되는데요, 이번 포스팅에서는 팝업(또는 모달)의 '다시 보지 않기' 버튼의 UX/UI 설계하는 방식에 대해 살펴보겠습니다. (비교적) 예전 스타일 과거의 UX 설계에서는 '다시 보지 않기' 옵션이 체크 박스로 제공되곤 했습니다. 이 체크 박스를 선택하고 '닫기' 버튼을 한 번 더 눌러 팝업을 종료해야 했는데요, 이 방식은 사용자가 여러 단계를 거쳐야 하므로 상대적으로 번거로웠습니다. 요즘 스타일요즘은 '다시 보지 않기' 버튼이 '닫기' 버튼과 동일한 레벨로 제공되는 경우를 많이 봅니다. 옵션도 '영영 다시.. 2024. 5. 10. UX/UI 스터디 : 모바일앱 바텀시트(Bottom Sheet) 활용법 모바일앱 UX 기획자로서, 우리는 항상 제한된 화면 공간 안에서 효율적으로 정보를 제공하는 방법을 찾고 있습니다. 그 방법 중 하나로 Bottom Sheet라는 강력한 UI 요소가 있습니다. 오늘은 다양한 사례를 통해 Bottom Sheet의 활용 방안을 살펴보도록 하겠습니다. Bottom Sheet란? Bottom sheet는 사용자의 여정 중간에 추가 옵션을 제공하거나 상세 정보를 보여주기 위해, 화면 하단에서 위로 슬라이드되는 작은 패널입니다. 이를 통해 사용자가 주요 작업을 수행하는 동안 화면을 벗어나지 않으면서, 빠르게 추가 작업을 수행하거나 정보를 확인할 수 있습니다.Bottom Sheet의 장점 Bottom sheet를 활용하면 다음과 같은 다양한 이점을 얻을 수 있습니다. 접근성: 화면 하.. 2024. 5. 2. 모바일앱 거래 완료 화면의 UX/UI 지난 글에서는 거래 내역 UI의 구성을 살펴보았습니다. 이번 글에서는 거래와 거래 내역 사이에 낀 단계, [거래 완료] 화면의 구성에 대해 알아보겠습니다. [거래 완료] 화면은 사용자가 서비스를 신청, 구매, 송금 등의 거래를 마친 뒤 그 결과를 보여주는 단계로, 어떤 일이 어떻게 마무리되었는지, 그 다음 단계는 무엇인지를 명확하게 전달하는 역할을 합니다. 이 화면에 따라 전체 거래 경험에 대한 만족도와 신뢰도가 종지부를 찍는 셈입니다. 오늘은 거래 완료 화면을 디자인하는 데 필요한 요소들을 살펴보고, 이를 기반으로 거래 완료 화면을 직접 만들어보도록 하겠습니다. User Experience 거래 완료 화면에서 사용자는 자신의 행동에 대한 명확한 피드백을 원합니다. 예) 성공적인 결제 확인 메시지, 구매.. 2024. 4. 24. 금융/핀테크 앱의 거래내역 UX/UI를 만들어보자 우리는 일상 속에서 은행, 카드, 핀테크 앱을 사용하며 금융 거래를 합니다. 그리고 거래 내역을 통해서 다양한 금융 활동을 추적하고 관리하고 있지요. 이러한 거래 내역의 UI는 어떻게 구성하면 좋을까요? 오늘은 은행 앱의 거래 내역 제공 현황을 살펴보고, 거래 내역, 상세 화면을 새롭게 구성해 보도록 하겠습니다. 거래 내역 & 상세 내역 사용자가 과거 거래 이력에서 확인하고자 하는 것은 다양한 거래 건의 날짜, 입금/출금처, 금액, 거래 유형 등의 기본적인 정보입니다. 따라서 [거래 내역] 페이지는 이러한 주요 정보를 명확하고 이해하기 쉬운 형태로 제공해야 합니다. 이외에 더 디테일한 정보는 각 거래 내역을 선택하여 진입하는 [상세 내역] 페이지에서 확인할할 수 있습니다. 거래 내역의 구성 은행 앱(카카.. 2024. 4. 21. 모바일앱 에러 메시지의 종류와 예시 문구 모바일 앱 UX를 만들면서 우리가 종종 간과할 수 있는 부분 중 하나가 바로 에러 메시지입니다. 이 메시지들은 사용자가 앱을 사용하는 동안 발생할 수 있는 다양한 문제 상황에 대응하는 방법이며, 에러 메시지를 정확하고 촘촘하게 정의하는 것은 전반적인 사용자 경험(UX)에 큰 영향을 미칩니다. 오늘은 UX 기획자로서 알아야 할 주요 에러 메시지 유형과 예시 문구를 정리해 보겠습니다. 주요 에러 메시지 다음은 에러 메시지가 발생하는 상황과 예시 문구를 정리한 표입니다.종류상황예시 문구네트워크 에러사용자의 인터넷 연결이 불안정하거나 끊겨 거래 요청이 서버에 도달하지 못할 때인터넷 연결을 확인해주세요서버 에러서버 오버로드, 유지보수, 내부 오류 등으로 인해 서비스가 일시적으로 사용 불가능한 상황서비스가 일시적으.. 2024. 3. 25. 벤치마킹과 레퍼런스의 차이를 아시나요? 서비스를 기획할 때, UX를 디자인할 때, 우리는 종종 '벤치마킹'과 '레퍼런스'라는 용어를 사용합니다. 여러분은 이 두 용어의 차이를 설명할 수 있으신가요? 저는 일할 때 ‘벤치마킹’과 ‘레퍼런스’라는 용어를 마구 혼용해서 사용하곤 했습니다. 그러다 문득 두 개념의 차이점이 뭘까 궁금해졌습니다. 자세히 뜯어보면 두 개념은 목적과 접근 방식에서 분명한 차이가 있습니다. 이번 포스트에서는 ‘벤치마킹’과 ‘레퍼런스’의 개념을 명확히 하고, 예시를 통해 각각 어떤 경우에 사용할 수 있는지 구체적으로 알아보겠습니다. 벤치마킹과 레퍼런스의 개념 먼저, 벤치마킹에 대해 알아보겠습니다. 벤치마킹 목적조직, 제품, 프로세스 등을 업계 표준이나 경쟁사와 비교하여 현재 상황을 평가하고 및 개선 전략 세우기 접근 방식체계적.. 2024. 3. 19. 도움을 요청할 때 마음이 불편해요! PM의 주요 업무 중 하나는 모든 사람에게 '요청'을 하는 것입니다. "이거 해주세요, 저거 해주세요, 이거 만들어주세요, 저거 고쳐주세요" 등등... 저는 처음에 누군가에게 이런 요청을 하는 것이 익숙하지 않았습니다. 혹시 선을 넘을까, 업무에 부담이 될까, 또는 거절당할까 두려웠기 때문입니다. 하지만 "제대로 요청하는 것"은 PM의 성장을 위해서도, 프로젝트의 목표 달성을 위해서도 아주 필수적인 기술입니다. 오늘은 우아하고 침착하게 요청하는 방법에 대해 살펴보도록 하겠습니다. 1단계 내 안의 망설임 이해하기 타인에게 무언가를 요청할 때 긴장하는 것은 자연스러운 현상입니다. 우리는 사회적 존재이므로, 누군가에게 거절당할까, 누군가를 불편하게 할까 항상 걱정하는 마음을 가지고 삽니다. 이러한 마음 때문에.. 2023. 11. 8. 이전 1 2 3 4 5 다음 728x90 반응형
