들어가며이번 프로젝트에서 Accordion 컴포넌트를 Headless 방법으로 만들어보면서 "Compound Pattern"이라는 디자인 패턴에 대해 알게 되었습니다. 이와 관련해 React의 다른 디자인 패턴들에 대해 궁금증이 생겨 몇 가지를 찾아보았습니다.검색해 보니 정말 다양한 패턴들이 있었는데요, 그중 몇 가지를 소개해 보려 합니다. 디자인 패턴우선, 디자인 패턴의 사전적 의미가 무엇인지 Chat Gpt에게 물어보았습니다.소프트웨어 설계에서 자주 발생하는 문제를 해결하기 위한, 재사용 가능한 모범적인 설계 구조를 의미합니다.사전적 의미에서도 알 수 있듯이, 디자인 패턴은 컴포넌트를 만들 때 주로 고려하는 재사용 가능성, 가독성, 확장성 등을 높여 개발 효율성을 향상시키는 코드를 설계할 수 있는 일..

들어가며사용성이 좋은 앱의 조건으로 어떤 요소가 떠오르나요? 적절한 정보 배치, 가독성, 접근성 등이 떠오르나요? 지난 프로젝트에서 우리는 '좋은 사용성'을 'Task 수행 시간'이라는 지표를 기준으로 평가해 보았습니다. 평가 목표는 주어진 시간 내에 빠르고 정확하게 태스크를 수행할 수 있는 레이아웃을 데이터 기반으로 가려내는 것이었습니다.어떤 상황에서 '빠른 수행 시간'이 곧 '좋은 사용성'이 될 수 있을까요? 티켓을 구매하는 하는 상황을 떠올려 볼까요? 좌석을 빠르게 선점하기 위해 결제 완료까지 가는 시간이 최소한으로 걸려야 하겠지요. 또는 운전 중 인포메이션 화면을 조작하는 상황을 생각해 봅시다. 전방 주시와 동시에  빠르고 정확한 화면 조작이 필요하겠죠. 이런 상황에서 좋은 사용성은 짧은 수행 시..

현실의 그림은 디지털로 넘어가 NFT 속 애니메이션으로 다시 태어나고, NFT 속 작품은 다시 현실로 무대를 옮겨 모두를 만나기도 합니다. 참으로 경계가 희미해진 시대에 살고 있다는 생각이 들죠. 아날로그는 아날로그에만 그치지 않고, 디지털은 디지털에만 그치지 않기 때문입니다. 책은 멈춰있는데 디지털 매체는 움직일 수 있고, 보는 것과 듣는 것을 함께할 수 있으니까요. - 이수지 작가의 인터뷰 중 현대어린이책미술관의 ‘춤을 추었어 Danced Away’ 전시에 다녀왔습니다. 이수지 작가와의 지난 인터뷰에서 작가는 그림책을 NFT와 연결한 이유에 대해 위와 같이 말했는데요. 전시의 경험이 작가의 말을 떠올리게 했습니다. 멈춰있는 그림이 우리를 다음 장면으로 이끌고, 공간을 가득 메운 Danced Away ..

들어가며pxd는 디자인 도구로 Figma를 사용하고 있습니다. 디자인과 개발 팀 모두 Figma를 이용해 화면 작업을 진행하고 있는데, 이 과정에서 몇 가지 불편한 점을 AI 기술을 활용하여 개선하고자 해당 프로젝트를 시작하게 되었습니다. 프로젝트의 배경디자인파트에서 Scaffold design system을 구축하면서 Color, Text Style 등을 변수로 설정하기 시작했고, 개발파트도 이에 맞춰 SCSS 변수를 동일하게 설정해 사용하고 있었습니다. 하지만 이 과정에서 한 가지 불편한 점이 발견되었습니다.현재 사용 가능한 Figma Plugin 중에서 Text Styles을 코드로 export할 때, 폰트 사이즈를 정의된 variables와 자동으로 매칭시켜 주는 기능이 없었던 것입니다. 이로 인..

들어가며케이팝은 독특한 팬문화를 가지고 있습니다. 전 세계적으로 케이팝이 인기를 끌며 엔터테인먼트 업계는 코어 팬덤을 겨냥하는 전략에 점점 주목하고 있죠. 이러한 흐름에 따라 팬 활동은 새로운 기술과 결합하며 다양한 모습으로 진화하고 있습니다. 팬 활동이 블록체인 기술을 만나면 어떤 모습일까요? pxd UX리서치팀은 지난 17개월 동안 약 8건의 리서치 프로젝트를 진행하며 20명 이상의 팬과 아티스트를 만났습니다. 이 과정에서 UX리서치팀이 깊게 이해한 팬과 크리에이터가 그리는 새로운 팬 활동의 모습을 총 4편에 걸쳐 소개하고자 합니다. 팬과 아티스트 활동 이해하기팬 활동은 아티스트의 활동 사이클을 주축으로 형성됩니다.  첫째, 아티스트는 음원과 앨범을 발매하고, 팬은 이를 구매합니다. 팬 활동의 첫걸음..

한국어 감정 단어를 정리한 표가 트위터에서 인기를 얻었습니다. 자신의 감정을 표현하는데 적당한 단어가 잘 떠오르지 않는다는 트윗에 인용으로 한국어 감정단어의 목록 작성과 차원 탐색 논문에서 수집한 감정단어 434개 한국어 감정 단어 목록을 공유해 주셨습니다. 요즘 미쳤다라는 표현이 심지어 방송에서도 남용되어 우려하는 목소리가 많은데요. 감정 어휘의 부족이 소통을 피상적으로 만드는 것 같습니다. 감정 어휘가 늘어 날 수록 자신의 감정을 보다 적확하게 표현하는것 뿐 아니라 자기 감정을 정확하게 아는데도 도움이 된다고 합니다. 어피니티 버블다만 가나다 순으로 나열된 이런 표 형태는 한눈에 잘 들어오지 않아 아쉬웠는데요. 우선 비슷한 의미끼리라도 묶어보면 좋을 것 같았습니다.어피니티 버블은 텍스트 임베딩을 이용..

KBW 2024로 엿본 미래 기술 트렌드지난 9월 글로벌 블록체인·웹3 축제 ‘Korea Blockchain Week(이하 KBW)’에 다녀왔습니다! 올해 KBW에서 단연 눈에 띄었던 주제는 바로 AI였어요. AI 포럼 ‘AI WORLD 2024 : ​Unlimited Scalability(무한 확장)’가 연계 행사로 열렸고, 전 세계 300여 명의 연사가 참여한 메인 콘퍼런스 ‘IMPACT’에서 가장 큰 비중의 세션 주제도 AI였죠.다채로운 프로젝트와 흥미로운 논의 사이에서 공통으로 뽑을 수 있는 핵심은 크게 두 가지였어요. 이제 서로 떼려야 뗄 수 없게 된 블록체인과 AI의 호혜적 관계, 두 기술을 바탕으로 ‘디지털 르네상스’가 펼쳐질 미래. 블록체인과 AI가 이끄는 디지털 르네상스는 어떤 모습일지 ..

새로 지은 집의 청소와 관리가 제대로 이뤄지지 않는다면 어떨까요? 아마 얼마 가지 않아 집안 곳곳에는 먼지가 쌓이고 문제가 생길 겁니다. 제품과 서비스도 집과 비슷합니다. 변화하는 기술과 사용자의 요구에 맞춰 기능을 더하거나 빼는 등 주기적인 관리가 필요하죠. 서비스를 최적의 상태로 유지하는 이 업무를 ‘UX 디자인 운영 업무' 또는 ‘UX 디자인 유지 보수'라고 부르며, 피엑스디(pxd)에는 이런 업무를 전문으로 수행하는 팀이 있습니다. 이번 글에서는 피엑스디가 진행했던 운영 프로젝트 사례를 소개하며 운영 업무를 통해 이룬 새로운 가치와 안정적인 운영 업무를 위해 필요한 것을 공유하고자 합니다.협업 솔루션 A(이하 A 서비스)는 피엑스디가 7년간 운영을 담당했던 서비스로, 기업 내의 프로젝트팀 생성과 ..

들어가며최근의 프로젝트 환경은 대부분 React, Vue, Angular와 같은 프레임워크를 기반으로 합니다. 이러한 프레임워크들은 컴포넌트 기반 아키텍처를 통해 재사용 가능한 UI를 구성하여 효율적인 개발을 가능하게 했죠.하지만 프레임워크 환경이 아닌 전통적인 HTML, CSS, JavaScript 환경에서 작업해야 하는 경우도 있습니다. 이때 웹 표준 기술만으로도 프레임워크가 제공하는 강력한 기능을 구현할 수 있는 방법이 있는데요, 그것이 바로 '웹 컴포넌트'입니다.웹 컴포넌트를 사용하면 HTML, CSS, JavaScript만으로 재사용 가능하고 캡슐화된 커스텀 컴포넌트를 만들 수 있습니다. 이를 통해 특정 프레임워크에 종속되지 않고도 프레임워크와 유사한 컴포넌트 기반 개발을 할 수 있습니다. 웹 ..

생성형 AI를 신입사원 삼아 함께 ‘반려동물 동반 가능 장소 검색 및 추천 서비스’를 모의 기획하고 있어요. 1편에서는 데스크 리서치로 기존 유사 서비스와 실제 사용자의 의견을 파악했는데요. 이번에는 서비스에 들어갈 주요 기능을 정리하고 IA(Information Architecture, 정보구조도)를 만들게요. 이를 시각화한 와이어프레임(Wireframe, 화면설계서)까지 그리면 완성입니다! 서비스 IA를 만들어보자  앞서 챗GPT(ChatGPT), ‘챗 사원’이 분석한 자료로 정리한 서비스 주요 기능은 크게 두 가지였어요.사용자 리뷰를 토대로 한 필수 기능 - 장소 위치 탐색, 커뮤니티, 예약기존 유사 서비스를 참고한 추가 기능 - 콘텐츠 큐레이션, 검색, 지도, 장소별 세부 정보이를 바탕으로 다시 ..

AI를 공부하면 할수록 실제로 사용해 보면서 이해도를 높여야 한다는 생각이 들어요. AI가 아무리 편하다고 하지만, 업무에 활용하려면 미리 연습이 필요하죠. 앞으로 능숙하게 사용할 수 있도록 AI와 함께 모의 서비스를 기획하기로 했어요. 지금부터 여러 서비스 기획자와 ‘신입사원 AI’가 한 팀을 이뤄 새로운 프로젝트를 진행할게요.우리의 첫 번째 목표는 기존 서비스 현황을 살피고 사용자의 불편을 개선할 수 있는 기능을 정리하는 거예요! 기존 서비스의 UI/UX를 알아보자프로젝트 주제는 ‘반려동물 동반 가능 장소 검색 및 추천 서비스' 개발로 정했어요. ‘반려 인구'가 1,500만 명에 달하는 시장 상황과 우리 팀원 모두가 반려동물을 기르고 있어 소비자 의견을 잘 알고 있다는 점을 고려했죠. 이제 주제에 맞..

사용자 경험 기반의 상품을 개발하거나 서비스를 구축할 때, 또는 개선할 때 가장 많이 사용하는 방법이 퍼소나(Persona)입니다. 타겟층을 명확히 하고, 그들이 원하는 바를 파악해 상품과 서비스에 녹여내는 것이죠. 그리고 퍼소나를 만들 때 주로 인터뷰, 설문 조사 등 정성적인 방법을 주로 사용합니다. 하지만 이는 적지 않은 시간과 비용이 투입되는 작업이죠. 피엑스디(pxd)는 구글 애널리틱스(Google Analytics, GA)의 정량 데이터를 바탕으로 사용자를 세분화해서 퍼소나 구축에 활용할 수 있는 ‘데이터 드리븐 퍼소나(Data Driven Persona, DDP)’를 개발하고 있습니다. 이번 글에서는 퍼소나를 구축하기 전에 피엑스디 홈페이지 및 블로그 데이터로 사용자를 분류하는 예시를 보여드리..