매일같이 집을 청소하고 관리하는 것처럼, 변화하는 환경과 사용자의 요구에 맞춰 제품과 서비스를 유지하는 업무를 ‘UX 디자인 운영 업무’ 또는 ‘UX 디자인 유지 보수’라고 합니다. 지난 글에서 고객사와 함께 이룬 결과를 바탕으로 그로스(Growth)의 관점을 더한 운영 업무를 소개했는데요. 이번 글에서는 피엑스디(pxd)가 수행했던 또 다른 운영 프로젝트 사례를 소개하고자 합니다. 복잡했던 서비스 위계를 정리하고, 고객사가 플랫폼을 운영하기 쉽도록 기반을 닦아준 프로젝트죠.규모가 큰 제조사는 필요에 따라 공장 내 조직에 적합한 업무용 서비스를 직접 만들어 쓰는 경우가 많습니다. 오랜 기간 조직별로 구축한 서비스는 겹치는 기능도 있고 그 사용 방식도 다르죠. 문제는 특정 팀이 만든 서비스를 다른 조직과 ..

들어가며현대 웹 개발에서 CSS는 단순한 스타일링 도구를 넘어 사용자 경험(UX)과 개발 효율성을 높이는 중요한 역할을 합니다. 특히 최근 도입된 CSS Subgrid와 Container Queries는 복잡한 디자인 요구사항을 간결하고 유연하게 해결할 수 있도록 돕는 최신 기능입니다.하지만 처음 접하면 기존 Grid/Flexbox, Media Queries와 뭐가 다른지 헷갈릴 수 있습니다. 이번 글에서는 Subgrid와 Container Queries가 기존 방식과 어떻게 다른지, 어떤 장점이 있는지 비교해 보겠습니다. 1. CSS Subgrid: 부모-자식 레이아웃의 일관성1.1 기존 Grid/Flexbox와의 차이 기존 Grid/FlexboxSubgrid부모와 자식의 레이아웃이 서로 독립적부모의 ..

들어가며최근 실시간 알림 등 양방향 통신이 필요한 기능에 대한 관심이 많아지면서 자연스럽게 WebSocket에 관심을 갖게 되었습니다. 특히 WebSocket을 좀 더 쉽게 구현할 수 있게 해주는 Socket.IO라는 라이브러리를 알게 되어 공유해 보고자 합니다.WebSocket과 Socket.IOWebSocket 이란?WebSocket은 클라이언트와 서버 간의 양방향 통신을 가능하게 하는 프로토콜입니다. 기존의 HTTP 통신이 클라이언트의 요청에 서버가 응답하는 단방향 통신이었다면, WebSocket은 연결이 수립된 후에는 양쪽에서 자유롭게 데이터를 주고받을 수 있습니다.Socket.IO란?Socket.IO는 WebSocket을 기반으로 하되, 더욱 다양한 기능을 제공하는 라이브러리입니다. 주요 특징은..

들어가며Next.js를 사용해 오면서 레이아웃 컴포넌트는 프로젝트 초반에 구성을 하며 생성하고 사용을 하지만, 템플릿은 그에 비해 사용을 잘 안 하게 되는 것 같아 이 둘에 대해 살펴보았습니다.글로 이해 하는 것보다 코드를 천천히 읽어보면 더욱 이해가 수월할 것 같습니다. 레이아웃의 내부 동작레이아웃 컴포넌트는 Next.js의 서버 컴포넌트 아키텍처에서 특별한 위치를 차지합니다.기본적으로 서버 컴포넌트로 동작하며, 한 번 렌더링 된 후에는 세그먼트 트리에서 지속적으로 재사용됩니다.// app/layout.tsximport { headers } from 'next/headers'export default async function RootLayout({ children,}: { children: Rea..

피엑스디(pxd)의 개발 조직인 XE(eXperience Engineering) 그룹은 개발자를 위한 여러 AI툴을 업무에 활용해 보고 있습니다. 지난 글에서는 깃허브(Github)의 코파일럿(Copilot)의 사용기를 전했는데요. 이번에는 커서(Cursor AI)를 써보고 그 후기를 전합니다. 이미 1년 동안 코파일럿을 써본 터라 하려고 하지 않아도 자연스럽게 두 AI툴을 비교해 보기도 했죠. 덧붙여 저희는 맥(Mac) 운영 체제에서 비주얼 스튜디오 코드(VSCode) 편집기를 활용했습니다.학습과 호환이 용이한 커서의 첫인상커서는 첫인상부터 좋았습니다. 챗GPT(ChatGPT)가 공개된 이후 세상에 많은 AI 코딩 툴이 나왔는데요. 그중에서도 커서가 매력적으로 느껴졌던 이유는 개발 문서를 학습시킬 수 ..

들어가며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..

어피니티버블(Affinity Bubble)은 수집된 ‘다수의 사용자 목소리’로부터 핵심 주제를 추출하여 계층적으로 시각화하고 인사이트 리포트까지 제공하는, pxd 업무툴입니다.* 본문 하단에 있는 URL을 통해 직접 사용해 보실 수 있어요!pxd에서는 사용자 의견으로부터 인사이트를 얻기 위해 어피니티 다이어그램을 사용했는데요. 주로 포스트잇을 활용하는 이 방법은 장시간동안 여러 디자이너들과의 협업이 필요합니다.그에 비해, 어피니티버블은 LLM을 이용하여 보로노이 트리맵 형식으로 한눈에 그리고 빠르게 데이터의 계층구조를 보여주죠. 일상에서 흔히 볼 수 있는 보로노이 구조가 비누거품 모양이라, ‘방법론+시각화’ 를 의미하는 단어들을 조합하여 ‘어피니티버블’이라고 이름 붙였습니다.텍스트 데이터 분석에서 널리 ..

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

텍스트와 이미지, 영상과 음악까지. 이제는 생성형 AI가 무엇이든 만들어줄 수 있을 것만 같습니다. 개발자가 사용하는 코드 역시 AI의 생성 대상에서 예외가 아닌데요. 간단한 조작으로 원하는 코드를 뚝딱 만든다니 업무 효율을 높일 수 있겠다는 기대가 드는 만큼 정말로 AI가 내가 만족하는 수준의 코드를 만들어줄지 의문이 들기도 합니다.가만히 앉아 있으면 궁금증은 해결되지 않기에, 피엑스디(pxd)의 개발 조직인 XE(eXperience Engineering) 그룹은 개발자를 위한 여러 AI 툴을 업무에 활용해 보기로 했습니다. 먼저 깃허브(GitHub)의 코파일럿(Copilot)을 사용해 봤죠. 이 글에는 코파일럿의 기본적인 사용법과 1년간 사용하며 느낀 점을 담았습니다. 참고로 제가 코파일럿을 사용한 ..

pxd UX리서치팀은 지난 17개월 동안 약 8건의 리서치 프로젝트를 진행하며 20명 이상의 팬과 아티스트를 만났습니다. 그리고 '블록체인이 만드는 팬덤의 진화' 시리즈를 통해 팬 활동이 블록체인 기술을 만나 그리는 새로운 팬 활동의 모습을 소개하고자 합니다.  [Cycle 2] 오프라인 이벤트: 개최 ↔ 참여WEB2: 암표와 전쟁 치르는 팬덤공연 예술 문화 시장에 골치 덩어리로 빠지지 않고 언급되는 존재는 바로 ‘암표’입니다. 암표상은 아티스트를 향한 팬의 순수한 심리를 이용해 이득을 취하려고 하죠. 최애를 보기 위해 정가보다 훨씬 높은 값을 내고서라도 구매하려고 할 테니 말이죠. 암표상들은 ‘매크로'라는 자동화 프로그램을 사용해 표를 예매하기 때문에 일반 팬으로써는 공정한 방식으로 표를 확보하기는 어..

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