나를 위한 일하기

제품 성과 판단 기준이 되는 지표엔 무엇이 있을까?

열심히 기획하고 개발한 우리의 제품, 과연 고객에게 제대로 전달되고 있을까? 우리가 세상에 내놓은 제품(Product)이 과연 고객에게 제대로 전달되고 있는지, 이대로도 괜찮은 건지 궁금하지 않으신가요?이 궁금증을 해결하기 위해, 오늘은 제품 성과를 판단하는데 사용되는 다양한 지표들을 정리해보도록 하겠습니다. 🚀 1️⃣ 사용자가 만족하고 있는가?첫 번째로 살펴볼 지표는 사용자 만족도입니다.이는 앱 리뷰와 같은 고객 피드백을 모니터링하거나 설문 조사 등을 통해 측정할 수 있습니다.긍정적인 피드백 비율이 높을수록 성공적이라고 볼 수 있겠죠? 📊 측정 지표NPS (Net Promoter Score): 사용자가 제품을 다른 사람에게 추천할 의향을 0~10점 척도로 측정CSAT (Customer Satisfa..

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

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

어려운 용어들은 고객들이 금융 상품에 접근할 때 큰 장벽이 되곤 합니다. 이에 대응하여 금융 업계에서는 어려운 개념을 쉽게 설명하는 콘텐츠를 만들기 시작했는데요, 토스의 , 카카오뱅크의 등이 대표적인 예시입니다. 오늘은 카드 뉴스 형태로 금융 지식을 전달하는 한화투자증권의 를 알아보겠습니다.투자에 도움을 주는 금융이나 산업 개념에 대해 일러스트로 표현하고 있는 것을 보실 수 있는데요, 오늘은 그 중에서도 ‘배당’을 다룬 카드 뉴스를 살펴보고 금융 UX 기획 시 참고할만한 부분을 꼽아봤습니다. 컬러톤 강조색(파랑) + 무채색(흑백) 딱 두가지 톤만 사용하여 중요한 부분에 주목이 잘 되는 깔끔한 구성이 돋보입니다. 질문과 답변 형식 질문을 먼저 던져 궁금증을 유발하고 하나씩 간단하게 답변하고 있습니다. 인포..

User Flow란 무엇인가서비스 기획이나 UX 디자인 업무를 하시는 분이라면 무조건 한번은 들어봤을 “User Flow”, 정확히 무엇을 의미하는지 알고 계시나요?사용자의 흐름? 순서도? 시나리오?이 아리송한 개념을 오늘 제대로 되짚어 보도록 하겠습니다.   Nielson Norman Group  (꿀팁!) UX와 관련된 개념이 궁금할 때는 닐슨 노먼 그룹 홈페이지를 참고하면 좋습니다. UX 분야의 창시자이자 구루라고 할 수 있는 도널드 노먼, 제이콥 닐슨이 만든 UX 컨설팅 회사의 공식 웹사이트이기 때문입니다. User Journeys vs. User FlowsUser journeys and user flows both describe processes users go through in order ..

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

앱을 실행하면 종종(아니 자주) 이벤트 팝업이 뜨고, 다시 볼 건지 말건지를 선택하는 기로에 섭니다. 다시 보지 않기를 선택하지 않으면 앱을 실행할 때마다 이벤트 팝업을 봐야 하는 고통(?)에 시달리게 되는데요, 이번 포스팅에서는 팝업(또는 모달)의 '다시 보지 않기' 버튼의 UX/UI 설계하는 방식에 대해 살펴보겠습니다. (비교적) 예전 스타일 과거의 UX 설계에서는 '다시 보지 않기' 옵션이 체크 박스로 제공되곤 했습니다. 이 체크 박스를 선택하고 '닫기' 버튼을 한 번 더 눌러 팝업을 종료해야 했는데요, 이 방식은 사용자가 여러 단계를 거쳐야 하므로 상대적으로 번거로웠습니다. 요즘 스타일요즘은 '다시 보지 않기' 버튼이 '닫기' 버튼과 동일한 레벨로 제공되는 경우를 많이 봅니다. 옵션도 '영영 다시..

모바일앱 UX 기획자로서, 우리는 항상 제한된 화면 공간 안에서 효율적으로 정보를 제공하는 방법을 찾고 있습니다. 그 방법 중 하나로 Bottom Sheet라는 강력한 UI 요소가 있습니다. 오늘은 다양한 사례를 통해 Bottom Sheet의 활용 방안을 살펴보도록 하겠습니다. Bottom Sheet란? Bottom sheet는 사용자의 여정 중간에 추가 옵션을 제공하거나 상세 정보를 보여주기 위해, 화면 하단에서 위로 슬라이드되는 작은 패널입니다. 이를 통해 사용자가 주요 작업을 수행하는 동안 화면을 벗어나지 않으면서, 빠르게 추가 작업을 수행하거나 정보를 확인할 수 있습니다.Bottom Sheet의 장점 Bottom sheet를 활용하면 다음과 같은 다양한 이점을 얻을 수 있습니다. 접근성: 화면 하..

지난 글에서는 거래 내역 UI의 구성을 살펴보았습니다. 이번 글에서는 거래와 거래 내역 사이에 낀 단계, [거래 완료] 화면의 구성에 대해 알아보겠습니다. [거래 완료] 화면은 사용자가 서비스를 신청, 구매, 송금 등의 거래를 마친 뒤 그 결과를 보여주는 단계로, 어떤 일이 어떻게 마무리되었는지, 그 다음 단계는 무엇인지를 명확하게 전달하는 역할을 합니다. 이 화면에 따라 전체 거래 경험에 대한 만족도와 신뢰도가 종지부를 찍는 셈입니다. 오늘은 거래 완료 화면을 디자인하는 데 필요한 요소들을 살펴보고, 이를 기반으로 거래 완료 화면을 직접 만들어보도록 하겠습니다. User Experience 거래 완료 화면에서 사용자는 자신의 행동에 대한 명확한 피드백을 원합니다. 예) 성공적인 결제 확인 메시지, 구매..

모바일 앱 UX를 만들면서 우리가 종종 간과할 수 있는 부분 중 하나가 바로 에러 메시지입니다. 이 메시지들은 사용자가 앱을 사용하는 동안 발생할 수 있는 다양한 문제 상황에 대응하는 방법이며, 에러 메시지를 정확하고 촘촘하게 정의하는 것은 전반적인 사용자 경험(UX)에 큰 영향을 미칩니다. 오늘은 UX 기획자로서 알아야 할 주요 에러 메시지 유형과 예시 문구를 정리해 보겠습니다. 주요 에러 메시지 다음은 에러 메시지가 발생하는 상황과 예시 문구를 정리한 표입니다.종류상황예시 문구네트워크 에러사용자의 인터넷 연결이 불안정하거나 끊겨 거래 요청이 서버에 도달하지 못할 때인터넷 연결을 확인해주세요서버 에러서버 오버로드, 유지보수, 내부 오류 등으로 인해 서비스가 일시적으로 사용 불가능한 상황서비스가 일시적으..

서비스를 기획할 때, UX를 디자인할 때, 우리는 종종 '벤치마킹'과 '레퍼런스'라는 용어를 사용합니다. 여러분은 이 두 용어의 차이를 설명할 수 있으신가요? 저는 일할 때 ‘벤치마킹’과 ‘레퍼런스’라는 용어를 마구 혼용해서 사용하곤 했습니다. 그러다 문득 두 개념의 차이점이 뭘까 궁금해졌습니다. 자세히 뜯어보면 두 개념은 목적과 접근 방식에서 분명한 차이가 있습니다. 이번 포스트에서는 ‘벤치마킹’과 ‘레퍼런스’의 개념을 명확히 하고, 예시를 통해 각각 어떤 경우에 사용할 수 있는지 구체적으로 알아보겠습니다. 벤치마킹과 레퍼런스의 개념 먼저, 벤치마킹에 대해 알아보겠습니다. 벤치마킹 목적조직, 제품, 프로세스 등을 업계 표준이나 경쟁사와 비교하여 현재 상황을 평가하고 및 개선 전략 세우기 접근 방식체계적..

세상에는 수많은 기업과 사람들이 만든 수많은 제품들이 우리의 삶을 풍요롭게 만들어주고 있습니다. 여러분은 어떤 제품을 만들고 계신가요? 그리고 어떻게 만들고 계신가요? 오늘은 IT 서비스 기획자로서의 경험을 바탕으로, 제품/서비스를 만드는 프로세스를 정리해보고자 합니다. 참고 : 아주 기본적인 내용을 간략하게 다루었습니다 제품 개발 프로세스 저는 제품 개발 프로세스를 위의 그림과 같이 총 5단계로 나눕니다. 문제 발견 아이디어 생성 제품 개발 마케팅 및 판매 시장/고객의 평가 각 단계별로 자세히 알아볼까요? 1) 문제 발견 이 단계는 전체 프로세스의 기반을 마련하는 매우 중요한 부분입니다. 시장에서 요구하는 것과 고객이 원하는 것이 무엇이고, 이를 가로막는 ‘문제’가 무엇인지 파악하는 단계입니다. ‘문제..

안녕하세요? 전천후 PM, 나를 위한 일하기입니다.오늘은 주로 구독 서비스에서 사용하는 이용 기간 제한 UX를 만드는 방법을 살펴보도록 하겠습니다. 많은 콘텐츠 플랫폼에서는 '이용 기간'에 따라 콘텐츠를 제한적으로 제공하고 있습니다. 예시멜론, 스포티파이 등 음원 스트리밍 사이트 유튜브, 디즈니플러스, 넷플릭스 등 미디어 플랫폼밀리의 서재, 윌라 등 e-book, 오디오북 플랫폼인프런, 클래스 101 등 강의 제공 플랫폼 서비스 이용 기간 내에는 거의 자유롭게 콘텐츠를 사용할 수 있는 반면 이용 기간이 끝나면 접근이 제한되죠.  이렇게 이용 기간에 따라 접근을 제한을 두는 기능은 어떻게 정의하면 좋을까요? 이용 기간의 구분  서비스 이용 기간을 크게 구분해 보면 서비스 이용 기간(노란색)과 그 전, 후의..

요즘 대부분의 온라인 콘텐츠에는 댓글 기능이 제공되곤 하죠. 뉴스에도 댓글, 블로그에도 댓글, 유튜브에도 댓글! 댓글 기능을 제공하면, 사용자의 적극적인 참여를 이끌어 낼 수 있고활발한 논의, 피드백 등 풍부한 2차 콘텐츠가 만들어져 해당 콘텐츠를 소비하는 사용자의 경험(UX)를 더욱 풍성하게 만들 수 있습니다. 과연 이런 댓글 UI를 만들려면 어떤 것들을 정의해야 할까요? 영역 구분댓글 영역은 보통 컨텐츠 영역 하단에 제공합니다. 댓글 영역은 다시 크게 1. 입력 영역과 2. 조회 영역으로 나뉩니다. 그러면 각 항목별 구성 요소들을 더 자세히 알아봅시다.1. 입력 영역1. 작성자 정보사용자 아이콘ID or 닉네임 2. 입력 필드입력 가능한 문자에 대한 정의 필요필요 시 이모지 입력 기능도 제공 가능글자..

오늘은 토스의 온라인 디자인 컨퍼런스를 참관했습니다. 토스 디자인 컨퍼런스, Simplicity23오늘도 문제를 해결하고 있을 모든 디자이너에게simplicity-23.toss.im 토스의 프로덕트 디자이너들이 제품을 디자인한 과정에 대해 대화 형식으로 풀어나간 컨퍼런스인데요, 대화를 듣다 보니 "Wow Moment"에 대한 언급이 자주 나왔습니다. 고객에게 감동을 주는 Wow Moment! 제가 만드는 제품에도 적용하고 싶어서 의미, 중요성, 만드는 방법, 그리고 예시에 대해 한번 찾아봤습니다.Wow Moment란?고객이 제품이나 서비스를 사용하다 예기치 않게 기뻐하는 순간입니다. 고객이 기대한 것 이상으로 긍정적이고 감동적인 경험을 발견한 것이죠. 감동의 순간은 다양한 방법으로 만들어질 수 있는데요,..