새로 지은 집의 청소와 관리가 제대로 이뤄지지 않는다면 어떨까요? 아마 얼마 가지 않아 집안 곳곳에는 먼지가 쌓이고 문제가 생길 겁니다. 제품과 서비스도 집과 비슷합니다. 변화하는 기술과 사용자의 요구에 맞춰 기능을 더하거나 빼는 등 주기적인 관리가 필요하죠. 서비스를 최적의 상태로 유지하는 이 업무를 ‘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)’를 개발하고 있습니다. 이번 글에서는 퍼소나를 구축하기 전에 피엑스디 홈페이지 및 블로그 데이터로 사용자를 분류하는 예시를 보여드리..

지난 2022년 여름부터 블록체인 기반 게임 플랫폼의 개편을 시작으로 약 2년 동안 블록체인 산업에 관한 리서치를 진행했습니다. DeFi(Decentralized Finance), NFT(Non-Fungible Token) 시장 서비스 등을 조사하며 많은 사용자를 만나 이야기를 나눴죠. 조사와 별개로 그들의 이야기를 듣고, 새로운 사실을 배운 순간들은 매우 유익하고 즐거웠습니다. 이번 글에서는 그중에서 특히 인상 깊었던 사용자들과의 만남을 소개합니다.블록체인 게임을 왜 할까? 타운스타라는 게임은 보통 100~1,000만 원 정도로 처음에 투입하는 금액부터 달라요. 암호화폐를 받을 수 있는 NFT를 사지 않으면 수익 없이 게임만 하다가 끝나는 경우도 있어요. - 국내 사용자 A 씨 블록체인 게임 사용자들과..

들어가며어머니께서 매주 듣는 콘텐츠가 있는데 해당 사이트에서는 아이폰에서 바로 재생 지원을 하지 않고 있었습니다. 안드로이드에서 아이폰으로 기기변경을 하신 후 해당 콘텐츠를 듣지 못하게 되어 제가 xml을 이용해 구글 시트에서 해당 콘텐츠의 URL을 가져와서 노션에 사용하시기 편하게 오디오로 올려주는 것을 거의 2년 동안 했었는데요.바쁘거나 잊어버려서 놓치게 되면 길게는 몇 달까지도 딸한테 차마 올려달라고 말은 못 하고 못 듣고 계셨던 게 마음에 걸려 저걸 어떻게든 자동화 시켜야겠다! 라는 마음을 먹고 이번에 만들게 되었습니다.  기존 사이트 콘텐츠 크롤링 하기요 문제는 기존에 영민 선임님이 포스팅 한 cheerio로 쉽게 해결할 수 있었습니다.다만 타 사이트의 자료를 가져오는 것이라 CORS 문제를 만..

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

그동안 소개해 드렸던 스캐폴드 디자인 시스템(Scaffold Design System, 이하 스캐폴드 시스템)은 업무의 효율성을 높이고 싶었던 구성원의 자발적인 스터디를 통해 만들어진 결과물입니다. 오늘은 하나의 목표 아래 같은 방향을 바라보며 힘을 모았던 저희의 이야기를 소개하려고 합니다. 사내에서 스터디를 운영하는 어려움과 그 극복 방안, 완성한 스캐폴드 시스템을 효과적으로 전파하기 위해 기울였던 노력을 담았죠. 하나의 제작기라고 생각해 가볍게 읽어주시면 좋겠습니다. 효과적으로 운영되는 스터디 만들기사내에서 진행하는 스터디에는 뒤따르는 어려움이 많습니다. 업무와의 우선순위를 고려하다 보면 계획대로 스터디가 이뤄지지 않을 때가 많죠. 저희도 비슷한 어려움을 겪고는 했는데요. 시행착오를 겪으며 스터디를 ..

피엑스디(pxd)는 그동안 다양한 프로젝트에서 각기 다른 규칙으로 컴포넌트를 만들어 왔습니다. 이 때문에 매번 다른 디자인 시스템 구조를 파악해야 했기에 작업 및 소통 효율이 떨어졌죠. 이를 해결하기 위한 기준 디자인 시스템인 스캐폴드 디자인 시스템(Scaffold Design System)을 구축하면서 컴포넌트를 일관된 기준으로 정리하고, 제작한 과정을 공유하고자 합니다. 반복되는 컴포넌트 제작, 서로 다른 용어프로젝트를 새로 시작하면서 디자인시스템을 만드는 작업자들과 진행 중인 프로젝트에 합류한 구성원들은 특히 컴포넌트를 새로 제작하는 데 많은 시간을 들여야 했습니다. 디자이너와 기획자, 프론트엔드 개발자까지 직군마다 아래와 같은 이유로 큰 불편함을 겪었죠.프로젝트를 시작할 때마다 수많은 컴포넌트를 ..

들어가며정적 사이트 생성(SSG)과 서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR)의 기능을 모두 포함하고 있는 프레임워크인 Next.js에서는 서버 사이드 렌더링(SSR)보다 정적 사이트 생성(SSG) 이 높은 성능을 지니기 때문에 정적 사이트 생성(SSG)의 사용을 권장하고 있습니다. 하지만 정적 사이트 생성(SSG)만으로는 분명 동적인 페이지를 만드는 데 한계가 있습니다.이로 인해 정적 사이트 생성(SSG)의 개념과 서버 사이드 렌더(SSR) 개념의 중간 영역쯤으로 볼 수 있는 증분 정적 재생성(ISR)이 등장하게 되었고, ISR로 인해 Next.js의 기능은 더욱 확장되었습니다. 이 글에서는 ISR의 개념과 작동 방식, 사용 예시,  Next.js에서의 예시 코드, 한계점 등에 대..

미리 알고 가면 좋은 개념원시 값(Raw value): #FF0000, rgb(255, 0, 0)와 같이 색상의 실제 값을 의미하며 가장 기본적인 색상 정의 방식입니다.시맨틱 컬러(Semantic color): 'text-primary', 'text-error'와 같이 색상의 용도나 의미에 따라 이름을 지은 토큰입니다. 용도에 따라 일관된 컬러를 사용하거나 접근성을 관리하기 위해 사용됩니다.스케일 컬러(Scale color): 'blue-100', 'gray-900'과 같이 색상을 일정한 단계로 나눠 지정한 토큰입니다. 일관된 색상 팔레트를 만들고 유지하는 데 사용됩니다. HSL 컬러 모델의 한계, 균일한 대비값 제작의 어려움HSL 컬러 모델에서는 Lightness(밝기) 값이 동일하더라도 Hue(색조)..