들어가며Intercepting Routes라고 혹시 들어보셨나요?Next.js 13.3 버전에 추가된 기능이라고 하는데 저는 최근에 알게 되었습니다.이 기능을 활용하면 모달의 사용성과 사용자 경험을 개선할 수 있을 것 같다는 생각을 하여 공유하고자 합니다.Intercepting Routes란?Intercepting Routes는 Next.js에서 도입된 새로운 라우팅 기능입니다. 이 기능을 사용하면 현재 레이아웃 내에서 다른 경로의 콘텐츠를 "가로채서" 표시할 수 있습니다.사용자가 특정 경로로 이동할 때, 그 경로의 콘텐츠를 현재 페이지 컨텍스트 내에서 표시하는 것입니다. 이는 주로 모달, 슬라이드 오버, 또는 다른 형태의 오버레이 UI 요소를 구현할 때 유용합니다.작동 방식 및 구현 방법Intercep..

pxd UX리서치팀은 지난 17개월 동안 약 8건의 리서치 프로젝트를 진행하며 20명 이상의 팬과 아티스트를 만났습니다. 그리고 '블록체인이 만드는 팬덤의 진화' 시리즈를 통해 팬 활동이 블록체인 기술을 만나 그리는 새로운 팬 활동의 모습을 소개하고자 합니다. [Cycle 4] 비음원 콘텐츠: 발행 및 판매 ↔ 소비/탐색/공유 WEB2: 포토카드를 매개체로 얻는 유대감과 소속감마케팅의 일환으로 팬덤이 소비할 수 있는 다양한 콘텐츠가 생겨나고 있습니다. 2022년 12월 한국소비자원에서 실시한 ‘팬덤 마케팅 소비자 문제 실태 조사’에 따르면, 팬은 주로 구매하는 팬덤 마케팅 품목으로 77.8%가 ‘음반’으로 응답했으며, 구매 목적으로는 음반 수집 및 음악 감상 외 ​​‘음반에 포함된 굿즈 수집’이 52.7..

어피니티버블은 다수의 사용자 목소리로 부터 핵심 주제를 뽑아 계층적으로 보여주는 시각화 방법입니다. pxd에서는 사용자 목소리에서 인사이트를 얻는 과정에 어피니티 다이어그램을 사용하는데요. 이 방법을 LLM을 이용해 모방하고 보로노이 트리맵으로 계층적으로 한눈에 보여줍니다. 일상에서 흔히 보는 보로노이 구조가 비누거품이라 방법과 시각화 각각에서 단어를 차용해 어피니티버블이라고 이름 붙였습니다. 텍스트 분석에서 많이 알려진 워드클라우드가 단순히 많이 사용되는 단어를 보여주는 데 비해 어피니티버블은 주제를 도출하고 그걸 정량적으로 시각화합니다. 트리맵 구조로 1차적으로 묶은 주제, 그걸 다시 묶어 추상화한 주제를 담고 있어 다양한 층위로 많은 정보를 효과적으로 전달합니다.어피니티 버블 데모를 만들고 활용하면..

pxd UX리서치팀은 지난 17개월 동안 약 8건의 리서치 프로젝트를 진행하며 20명 이상의 팬과 아티스트를 만났습니다. 그리고 '블록체인이 만드는 팬덤의 진화' 시리즈를 통해 팬 활동이 블록체인 기술을 만나 그리는 새로운 팬 활동의 모습을 소개하고자 합니다.  [Cycle 3] 팬클럽: 모집 ↔ 가입 및 활동팬클럽 활동의 핵심은 연대감에 있습니다. 저희는 이것을 팬덤과 아티스트의 연대, 팬 간 연대 두 가지 관점으로 바라보려고 합니다. 3-1. 팬덤과 아티스트의 연대먼저 팬덤과 아티스트의 연대는 공생하는 공간의 특성과, 이 공간에서 이루어지는 소통 방식에 따라 영향을 받는다는 것을 확인했습니다. WEB2: 정제되지 않은 여론이 오가는 팬덤 플랫폼케이팝 팬덤은 아티스트와 팬 간 결속력이 독보적이라는 특징..

디자인 시스템은 총 8편의 시리즈로 구성되어 있습니다. 1편 - 디자인 가이드라인/디자인 시스템은 왜 필요한가(현재글) 2편 - 디자인 가이드라인/디자인 시스템의 종류 3편 - 디자인 가이드라인/디자인 시스템의 운영 4편 - 디자인 가이드라인/시스템 작업 프로세스 및 유의할 점 5편 - GUI 디자인 리서치 6편 - 기본 시각 요소 설계 시 알아 두어야 할 것들 7편 - 컴포넌트를 디자인할 때 고려해야 할 것들 8편 - 특수한 목적을 고려한 컴포넌트 디자인하기 들어가면서 2014년 6월 구글이 머티리얼 디자인 시스템을 공개한 후, 많은 회사들이 고유 디자인 시스템을 구축하고 공유하고 있습니다. 구글, 애플처럼 운영 체제를 관리하는 기업뿐 아니라, IBM, Shopify 등의 플랫폼, Audi, Uber과..

들어가며 사람은 어떠한 작업을 할 때 학습과 반복적인 행동을 통해 과정을 익히며 때로는 유연하게 변경하거나 다르게 대처하기도 합니다. 하지만 컴퓨터는 입력받은 값이 문자인지 숫자인지, 숫자라면 받은 수는 5보다 큰지 아닌지 등 한 단계 한 단계 조건이나 처리 기준이 있어야만 유효한 결과(값)를 도출합니다. 따라서 코드 작업을 할 때 흐름을 먼저 그리고 그것을 코드로 옮기는 습관이 있다면 프로그래밍 사고의 폭을 넓히는데 도움을 줄 수 있습니다. 흐름을 그린다는 것은 결국 사용자 경험(UX)에서 출발한다고 생각합니다. 그것을 어떻게 그려야 하는지 살펴보겠습니다. 순서도(Flowchart)란 워크 플로우나 과정을 기호(도형)로 그린 것입니다. 프로그래밍뿐만 아니라 분석, 설계, 디자인, 문서 작성 등 다양한 ..

들어가며 웹서버와 WAS의 종류들 최근 네트워크에 관련하여 소소하게 책을 읽으며 스터디하는 시간을 가졌는데 그중 관련이 좀 있을법한 주제를 가지고 이번 블로그 포스팅하려고 합니다. 네트워크를 조금 공부해보면서 자연스럽게 관련이 있을 웹서버에 대해서도 좀 알아보게 되었는데 웹서버(Ws)와 웹 어플리케이션 서버(WAS)에 대해 그냥 대략 이렇다~ 할 정도의 지식만 있었지만, 구체적인 차이점과 장단점이라던가 왜 WAS를 쓰면서도 Ws를 따로 두는 것인지 명확한 이유를 알지 못한 채 넘어갔었습니다. 이번 블로그 포스팅을 작성하면서 한 짝 더 학습되면 좋을 것 같아 작성하였습니다. 웹서비스가 어떻게 사용자(client)에 정보를 제공하며 그중 웹서버와 WAS가 하는 역할이 무엇이며 차이점 및 효율성에 대하여 얘기..

프로덕트 디자이너의 생성형 AI 사용기‘창작물’ 하면 뭐가 떠오르시나요? 프로덕트 디자이너로서 늘 디자인을 하고 있지만, 뭔가를 창작하는 일은 늘 어렵습니다. 괜히 부담감이 느껴지곤 하죠. 이런 창작의 어려움이 저 혼자만의 일은 아닐 겁니다. 원하는 대로 결과물을 만들어준다는 생성형 AI의 도움을 받는다면 어떨까요. 생성형 AI 챗GPT(ChatGPT)와 미드저니(Midjourney)*로 콘텐츠를 만들며 편리한 창작을 위해 필요한 조건들을 살펴봤습니다.*미드저니 V6 기준 생성형 AI로 네 컷 만화를 만든다면?여러 창작물이 있겠지만 그중에서도 저는 가장 먼저 떠오르는 글과 그림을 골랐습니다. 글과 그림을 각각 따로 만들기보다는 하나의 이야기를 만든 뒤에, 이 이야기를 표현하는 네 장의 이미지를 생성, ‘..

* 아래 예시 이미지들 중 일부는 Animated GIF라서 로딩 시간이 필요하거나 반복재생이 잘 안 될 수 있습니다.지난 글에서 'AI를 위한 UI 패턴'이라는 주제로 최근 AI를 활용하는 서비스들이 가지는 큰 구조의 UI 패턴들을 다뤘습니다. 이번 글에서는 AI를 활용한 서비스들에서 보이는 UX 요소들을 정리해보려고 합니다. 물론, UX적인 요소이기도 하지만 기술적인 부분과도 많은 부분 겹쳐져 있습니다. 더 넓게 살펴보고 세분화하면 훨씬 더 다양한 요소들을 정리할 수 있겠지만, 일단 제가 지금껏 학습하고 실제로 접한 서비스들을 기반으로 정리를 해보겠습니다.그리고 최근 많이 이야기되는 RAG, Agent와 같이 앞으로 기술적인 부분이 더 발전하고 새로운 방식이 추가될 수도 있고, 그렇다면 UX 관점에서..

최근 2년 동안 AI는 그 어떤 것보다 빠르게 발전하며 일상생활에 사용되고 있습니다. 대나무가 자라는 속도만큼 한 달 한 달 대단한 성장과 발전을 하며 더 좋아지고 있죠. 기존에도 AI는 있었지만, 모두가 느끼듯 지금과 같은 수준은 아니었습니다. 특히 생성형 AI, 그중에서도 ChatGPT는 이제 제가 컴퓨터를 사용하다가 막히거나 질문이 생길 때 가장 먼저 떠오르는 도구가 되었습니다. 특정 분야의 지식이나 최근 정보, 코딩, 에러 해결, 영어 등 뭐든 내가 필요한 정도는 해 줄 것이란 생각이 들죠.지금은 ChatGPT, Gemini, Claude 등의 대형 파운데이션 모델과 그 대화형 AI 서비스가 현재는 가장 널리 사용되는 서비스이지만, MS Office나 Google Workspace 같은 업무 도구..

눈 깜짝할 새 기술이 발전하고 숨 가쁘게 변화하는 블록체인 세상에서, 정보는 소중한 재산이에요. '앎'으로써 앞을 내다보는 일은 위기에 대응하고 새로운 기회를 놓치지 않게 하는 힘이 되죠. 2024년에는 어떤 새로운 변화가 펼쳐질까요? 올해의 블록체인 트렌드, 그 두 번째 편을 소개할게요. BaaS for Enterprise Blockchain BaaS(Blockchain as a Service)를 이용해 경영 전반에 블록체인 기술을 활용하는 기업이 늘고 있어요. 블록체인은 미래 경쟁력 강화를 위해 필요하지만, 자체적으로 구축하려면 많은 비용과 에너지가 들어요. 기업들이 클라우드 기반으로 블록체인 기술을 제공하는 서비스인 BaaS를 찾는 이유예요. 자본력을 갖춘 기업들도 글로벌 IT 기업의 BaaS를 이..

UX 디자이너가 데이터를 보는 이유 UX 디자이너는 서비스를 설계하고, 구현해 내기 때문에 서비스의 의도를 누구보다 명확하게 파악하고 있습니다. 이용자들이 디자인 의도대로 서비스를 사용하고 있는지, 그렇지 않은지 가장 먼저 알아챌 수 있죠. 따라서 디자인이 제대로 작동하지 않을 경우, 빠르게 개선안을 제시할 수 있습니다. 이것이 프로덕트팀이 데이터를 들여다보는 이유이자 배경입니다. 데이터 기반으로 서비스 설계를 검토하고, 이용자 행동 방식을 이해해 실제 서비스 운영에 활용하는 것이죠. 데이터 분석의 세 가지 목적 1. 이용자 이해 2. 이용자의 서비스 이용 방식 파악 및 유형 구분 3. 서비스 개선 및 디자인 의사 결정 이러한 목적을 달성하기 위해 프로덕트팀은 정량적 사고와 경험을 바탕으로 데이터 기반의..

블록체인은 관련 주체들과 사회적이고 기술적인 환경이 상호작용하며 하나의 생태계를 이루고 있습니다. 블록체인 기술을 이용하는 우리는 모두 블록체인 생태계의 일부지만, 그 전반을 알기란 쉽지 않습니다. 그래서 [블록체인 연대기(the Blockchain Chronicle)]는 블록체인 생태계에 무슨 일이 일어나고 있는지 살펴보고 또 기록합니다. 차곡차곡 쌓아나간 블록체인 생태계의 오늘이 내일을 향한 어제의 기억이 될 수 있도록 말이죠. 누구나 한 번쯤은 블록체인과 AI(인공지능)에 대해 들어보셨을 겁니다. 블록체인과 AI는 우리가 미래를 말할 때 빠지지 않는 키워드지만, 자칫 막연하고 먼 이야기처럼 느껴질 수도 있죠. 블록체인과 AI는 우리 삶에서 어떤 도움을 주고 있을까요? 블록체인과 AI가 만난 미래는 ..

"사용자 입장에서 이건 좀 불친절하게 느껴질 것 같아요" "사용자가 기대한 건 이게 아니라고!" "VOC(Voice of Customer)로 접수된 사항이에요, 이거 꼭 반영되어야 해요" "처음엔 어렵겠지만 한두 번 써보면 익숙해질걸요?" "어떤 (미친) 사용자가 여기서 확인 버튼을 마구 누르면 어떻게 되는 거야?" 디자인 의사결정 과정에 참여해본 경험이 있으신가요? 위와 같은 논의의 경험이 한 번쯤은 있으실 것입니다. 분명히 사용자 또는 고객 입장에서의 디자인 결정을 위한 대화입니다. 그런데 위의 대화 참여자들이 말하고 있는 '사용자(고객)'들은 같은 사람일까요? (잠시 생각해 보시기 바랍니다...) 위의 대화에서는 '사용자가 누구인지, 같은 사람인지 아닌지' 보다는 '요구사항이 무엇인지'에 더 집중하..

사용자를 관찰하고 인터뷰하는 이유는 사용자의 문제에 공감하고 이해하기 위해서입니다. 그리고 디자인 과정에서 집중해야 할 문제를 정의하고 해결 방향을 도출하기 위해서입니다. 이 과정에서 우리는 '행동 패턴'이라는 말을 자주 하게 됩니다. 사용자 조사의 목적으로 '사용자의 행동 패턴을 발견하고 이해하기, 이로부터 인사이트를 얻기'라고 명시하는 경우가 매우 많습니다. 처음에는 당연하고 쉽게 생각을 했다가, 고민을 하면 할수록 '행동 패턴'이라는 용어가 낯설고 어렵게 느껴질 때가 있습니다. 행동 패턴이란 무엇이고 왜 중요하며, 어떻게 발견해야 하는 것일까요? 행동 패턴이란 무엇인가? 우선 '패턴(pattern)'이라는 말을 이해해야 합니다. 위키피디아에서는 패턴이란 '예측 가능한 방식으로 반복되는 요소를 지닌 ..

벽면 가득히 포스트잇을 붙여가며 토론하고 작업하는 모습은 UX 디자인 과정에서 아주 익숙한 풍경입니다. 이번 글에서는 '쉽지만 어려운 포스트잇! 활용'에 대해 이야기하려고 합니다. 물론 포스트잇은 특별한 사용법이나 활용법이 따로 있는 툴이 아닙니다. 단순함이 가장 강력한 장점인 포스트잇에 그런 게 있을 리가 없습니다. 그렇지만 사용자 조사 후 포스트잇을 활용하여 정리할 때, 특히 사용자의 목소리로부터 인사이트를 도출하고자 할 때 알아두면 유용한 몇 가지 팁들을 정리했습니다. 사전 준비 : 사용자 데이터 확보하기 우선 사용자 조사 데이터를 확보해야 합니다. 직접 진행한 인터뷰나 관찰에 의해 얻어진 것이 가장 좋습니다. 직접 조사한 데이터가 없더라도 다른 기관이 조사한 자료나 설문에 의한 사용자의 답변, V..