나를 위한 일하기

세계 최고 부자 빌 게이츠가 사용하는 명상 앱으로 유명해진 헤드스페이스, 저도 유료 버전을 구독하며 애용하고 있습니다. 이 앱을 사용하다 보니 일반적인 앱들과는 색다른 경험을 제공하고 있다는 것을 느꼈어요.그래서 오늘은 ‘몸과 마음의 평안’을 목표로 하는 앱의 UX에는 어떤 다른 점이 있을까 살펴보는 시간을 마련했습니다.헤드스페이스란?정신 건강, 마음챙김, 명상 가이드로서, 전문가가 지도하는 명상, 정신 건강 코칭, 마음챙김 운동 등의 콘텐츠를 제공합니다.이러한 명상 세션과 호흡 가이드를 통해 스트레스를 줄이고, 숙면을 돕고, 정신 건강을 개선하는 데 도움을 주는 서비스입니다.※ 설치 링크 : 구글 / 애플 정보 구조화면을 살펴보기에 앞서, 헤드스페이스 앱의 정보가 어떤 구조를 이루고 있는지 살펴보겠습니..

모바일앱의 기본 요소인 “페이지”와 “팝업”그 차이점이 무엇인지, 언제 어떻게 사용해야 하는지 알고 계신가요?오늘은 이 두가지의 아리송한 개념을 파헤쳐 보겠습니다. 페이지란? 쉽게 말해 ‘바탕 화면’이라고 보시면 됩니다. 콘텐츠들을 모아서 보여주는 바탕이 되는 것이죠.모바일앱의 아주 기본적인 단위로서 독립적인 콘텐츠와 작업 영역을 제공합니다.주요 플로우에서 사용: 가입, 구매, 등록 등 여러 단계를 포함한 주요 기능을 페이지로 제공하는 것이 일반적입니다.내비게이션 : 페이지 상단 헤더에 타이틀과 ‘뒤로가기’ 버튼을 제공하여, 사용자가 현재 위치를 인식하고 다른 화면으로 돌아갈 수 있는 명확한 네비게이션을 제공합니다. 여러 단계가 있는 페이지인 경우 ‘다음’으로 이동할 수 있는 버튼이 하단에 배치되기도 합..

입력 필드는 모바일 앱 또는 웹 서비스에서 가장 중요한 UI 요소 중 하나입니다.회원가입, 로그인, 본인인증에서부터 송금, 구매, 배송, 주식 매수/매도 등 다양한 거래를 처리하기 위해서, 사용자가 직접 특정한 값을 입력해줘야 합니다.ID는 무엇인지, 얼마를 보내고 싶은지, 주소지는 어디인지, 카드 번호는 무엇인지 등등이렇게 다양한 값을 적는 입력 필드를 만들기 위해서는 입력 전-중-후의 각 단계별로 고려해야 할 사항들이 있습니다. 저와 함께 하나씩 살펴봅시다.입력 전 (기본값) 입력 필드에 값이 입력되기 전 상태는 어떤 모습일까요?이 예시를 보시면 기본 상태에서의 입력 필드는 사용자에게 내가 앞으로 어떤 것들을 입력해야 하는지에 대한 힌트를 줍니다.순서대로 하나씩 보시면,레이블: 어떤 정보를 입력해야 ..

여러분은 UX/UI 디자인을 하시다가 문득, 이런 궁금증이 드신 적 없으신가요? "이렇게 하는 게 맞나? 다른 사람들은 어떻게 했지? 정답이 있는걸까?" UX/UI 디자인에서 '정답'이라고 콕집어 말할 수 있는 것은 없지만, 여러 전문가들이 모여 정리한 가이드라인은 분명히 존재합니다. 디자인을 하다 미로에 빠졌을 때, 벽에 부딪혔을 때 이러한 가이드라인은 북극성처럼 길을 잡을 수 있게 해줍니다. 또한 다른 부서(기획, 개발, QA 등) 사람들이 "이렇게 디자인한 근거가 뭐야?" 물어봤을 때 당당하게 대답할 수 있는 근거가 되어주기도 하죠. 이번 포스트에서는 여러분의 UX/UI 디자인에 도움을 줄 수 있는 국내외의 대표적인 UX/UI 가이드라인 웹사이트를 소개해 드리겠습니다.  1. 플랫폼 제공자 기반 가..

접었다 폈다하며 오묘한 소리를 내는 아코디언! 웹/앱 기획할 때도 자주 듣는 용어지요?아코디언 UI는 화살표(▼)를 클릭해 접고 펼칠 수 있는 동적 요소로, 접힌 상태에서 제목과 같은 핵심 정보를 먼저 확인하고 필요할 때 펼쳐서 추가 내용을 확인할 수 있게 해줍니다. 오늘은 아코디언 UI의 주요 사용처와 장점, 주의점을 소개하겠습니다. 주요 사용처 아코디언 UI는 FAQ, 공지사항, 대댓글 등 어떤 목록이 있고, 각 항목의 내용이 길지 않은 경우 유용한데요, 사용자가 전체 목록을 빠르게 스캔하고, 관심 있는 부분만 자세히 볼 수 있기 때문입니다. 그럼 사례를 통해 더 자세히 들여다보도록 하겠습니다. 당근의 경우에는 견적 요청 카테고리별 상세 옵션을 펼쳤을 때 제공하고 있습니다. 필요한 카테고리만 펼쳐서 ..