들어가며프로젝트를 시작하면 공통 UI를 설계하더라도, 보통은 해당 프로젝트 내에서만 제한적으로 사용하는 경우가 많았습니다. 이번에는 저는 공통 컴포넌트를 별도 패키지로 만들어 배포하고, 다른 서비스에서 설치해 사용하는 구조로 진행하게 되었습니다.그 과정에서 package.json을 단순히 “패키지 목록과 실행 스크립트를 관리하는 파일”로만 알고 있다가 실제로 어떤 역할을 하는지 살펴보게 되어 소개하고자 합니다.1. PeerDependenciesdependencies와 devDependencies는 프로젝트 환경 세팅 시 설치해야 하는 항목들이라 익숙한 개념입니다. 하지만 peerDependencies는 npm init 시 기본적으로 생성되지 않기 때문에 상대적으로 생소할 수 있어, 함께 비교해 보았습니다..

사용자는 이제 검색보다 AI에게 먼저 묻습니다.“OO 추천해줘.”“믿을 만한 곳 알려줘.”“어떤 서비스를 고르면 좋을까?”좋은 콘텐츠도 AI가 이해하기 어려운 구조라면 답변에 포함되기 어렵습니다.GEONIQ에서 URL 하나로 내 콘텐츠의 SEO·GEO 상태를 진단해보세요. 두 가지 미션, 두 가지 혜택참여 미션대상완료 조건혜택무료 진단 미션신규 회원회원가입 후 URL 진단 1회 완료Starter 플랜 1개월 (16,800원 상당)채널 공유 미션신규 회원 · 기존 회원공식 채널 팔로우 및 이벤트 게시물 좋아요, 리포스트 후 '공유 완료' 댓글(댓글 계정으로 미션 완료 확인 되면 지오닉 계정을 받기 위해 DM 드립니다.)Basic 플랜 1개월 (85,600원 상당)신규 회원은 두 미션을 모두 완료하면 혜택..

오버뷰 다음에 필요한 것앱 리뷰를 볼 때 처음 필요한 것은 전체 지형입니다. 사람들이 어떤 이야기를 많이 하는지, 그 이야기가 긍정에 가까운지 부정에 가까운지를 먼저 알아야 하니까요. 어피니티버블은 이 첫 단계에 강합니다. 정성 텍스트를 한 장의 지도로 펼쳐서, 리뷰 더미 안의 큰 주제와 감정의 흐름을 빠르게 보여줍니다.하지만 서비스 제공자 입장에서는 전체 지도를 보는 것만으로 다음 액션을 결정하기 어렵습니다. "이런 주제의 불만이 많구나", "이 영역은 만족도가 높구나"까지는 알 수 있지만, 무엇을 먼저 고쳐야 하는지, 어떤 기능을 더 밀어야 하는지, 경쟁사 대비 어디가 강점인지까지 바로 이어지지는 않습니다.의사결정에는 한 단계가 더 필요합니다. 이번에서는 패션앱 3종(에이블리·무신사·지그재그) 리뷰..

오래전에 함께 일을 했던 동료가 있어요. 그 동료의 업무 커뮤니케이션 방식에서 배울 점이 많았습니다. 제가 궁금해하기 전에 업무 상황이 공유되고, 제가 판단을 내려야 하는 부분이 콕 집어서 전달되어 저와 동료의 인지부하를 크게 줄여주었습니다. 아직도 가끔 ‘그 친구라면 어떻게 얘기했을까?’ 생각을 하곤 합니다. 조직이라는 곳은 참 다양한 사람들이 모이는 곳입니다. 듣기 좋은 얘기만 할 수 없고, 들을 수도 없습니다. 일정이 밀리기도 하고, 예상했던 만큼 결과가 나오지 않기도 하고, 클라이언트의 반응이 기대와 다를 때도 있는데, 이런 어려운 상황을 조직 안에서 잘 풀어내기가 어렵습니다. 어떤 대화는 문제를 더 크게 느끼게 만들고, 어떤 대화는 문제를 함께 다룰 수 있게 합니다. 전자를 레드레드, 후자를 그..

들어가며React 공식 블로그나 Next.js App Router 중심의 흐름을 보면 최근 React 생태계는 서버 중심 렌더링 구조를 적극적으로 활용하는 방향으로 변화하고 있는 것 같습니다. Server Components, Streaming UI, Server Actions 같은 개념들의 등장 이후, 기존에 익숙했던 CSR(Client Side Rendering) 중심의 개발 방식이 Server Components 기반 구조와 공존하는 방향으로 흐르는 추세인 것 같습니다. 이런 흐름은 React 19 이후에 좀 더 명확해졌는데요, 근래의 React 동향에 대해서 정리해 보았습니다. 서버 중심 구조로 변화하는 ReactServer Components 중심으로 변화해온 흐름React 공식 블로그를 보면 ..

우리는 '차별화(Differentiation)'의 중요성을 너무나 잘 알고 있습니다. 그런데 a16z와 같은 실리콘밸리의 대표적인 벤처캐피탈은 최근 제품이나 서비스의 경쟁력에서 차별화보다 '해자(Moat)'의 중요성을 강조하고 있습니다. 차별화와 해자본격적인 이야기에 앞서, 두 개념을 살펴보겠습니다. 차별화 (Differentiation, 差別化) 일반적인 언어로서의 차별화는 둘 이상의 사물 사이의 차이를 인식하거나 만들어내는 것을 의미합니다. 차별화란 기업이나 개인, 제품이 다른 대상과 구별되는 고유한 특성이나 가치를 창출해 소비자에게 인식시키는 행위나 전략을 뜻합니다.AX 시대에는 새로운 AI 기능이나 에이전트 경험을 먼저 제공하는 것이 대표적인 차별화 전략이 됩니다. 다만 AI 기술의 확산 속도가..

들어가며지난 편에서 검색엔진과 AI 크롤러가 우리 사이트를 어떻게 발견하는지를 다뤘어요. robots.txt, sitemap, canonical, 리다이렉트, AI 크롤러 허용까지 — 결국 "크롤러가 페이지에 안정적으로 닿을 수 있는가"가 핵심이었죠.이번 편에서는 그 다음 단계 이야기예요. 크롤러가 페이지에 도착했어요. 그다음엔 뭘 볼까요?검색엔진이든 AI든, 페이지에 도착한 이후에는 콘텐츠의 구조를 읽어요. 제목이 뭔지, 주제가 뭔지, 어떤 질문에 답하고 있는지, 정보가 어떤 단위로 나뉘어 있는지. 이 구조가 명확한 페이지는 검색 결과에서도, AI 답변에서도 선택받을 가능성이 높아요.이번 편에서는 "AI가 인용하고 싶어지는 페이지"가 어떤 구조적 특성을 가지고 있는지, 프론트엔드 개발자가 실제로 챙길 ..

배달 음식점을 고를 때도, 상품을 살 때도 별점부터 봅니다. 소비자에게는 나쁜 걸 먼저 걸러내는 좋은 휴리스틱입니다. 그런데 서비스를 운영하는 쪽, 그러니까 마케터나 리서처는 같은 별점을 어떻게 읽어야 할까요? 별점은 결국 개개인이 누른 별의 평균이고, '평균적인 사용자'는 대체로 존재하지 않습니다. 퍼소나를 나눠 보듯, 별점도 사용자를 세분화해서 봐야 합니다.리뷰 텍스트를 어피니티버블로 묶으면 "사용자가 무엇을 말하는지"는 꽤 잘 보입니다. 그런데 리뷰에는 별점, 작성 시점 같은 정보가 늘 함께 달려 있습니다. 텍스트 군집을 이 메타데이터와 함께 보면 어떻게 되는지, K뷰티 앱 top3 (올리브영·화해·글로우픽)의 앱 리뷰로 확인해봤습니다.별점은 평균이 아닌 분포를 봐야 한다별점 2.6점인 사용자는 없..

들어가며지난 편에서 프론트엔드 개발자가 왜 SEO를 챙겨야 하는지, 그리고 GEO라는 새로운 관점이 왜 필요해졌는지 이야기했어요. 이번 편에서는 좀 더 실전적인 이야기를 해볼게요.검색엔진이 우리 사이트를 검색 결과에 보여주려면, 먼저 우리 사이트를 발견해야 하잖아요. 근데 이 "발견"이라는 과정이 생각보다 단순하지 않더라고요. SEO/GEO 분석 서비스를 만들면서 수많은 사이트를 들여다봤는데, 콘텐츠는 멀쩡한데 크롤러가 아예 접근을 못 하는 경우가 의외로 많았어요. 대기업 사이트에서도요.이번 편에서는 검색엔진 크롤러가 우리 사이트를 발견하고 색인하는 과정을 프론트엔드 개발자 관점에서 풀어볼게요.크롤링 → 인덱싱 → 랭킹, 이 흐름부터 잡자검색엔진이 검색 결과를 보여주기까지는 크게 세 단계를 거쳐요.크롤링..

방대한 인터뷰와 설문 데이터 속에서 의미 있는 인사이트를 찾기 위해 고군분투해 오셨나요? pxd의 UX 노하우를 담아 정성 데이터 분석의 새 길을 열어가는 어피니티버블(Affinity Bubble)이 더 강력해진 v1.1 업데이트와 함께, 서비스의 완성도를 함께 높여갈 서포터즈 1기를 모집합니다.어피니티버블은 인터뷰, 앱 리뷰, 설문 등 흩어진 정성 데이터를 AI로 분석해 어피니티 다이어그램 형태의 버블 시각화로 보여주는 도구입니다. 어피니티버블이 실무자분들에게 정말 유용한 도구로 진화할 수 있도록, 여러분의 현장감 넘치는 의견을 들려주세요. 1️⃣ 서포터즈는 어떤 활동을 하나요?어피니티버블 서포터즈 1기의 자격 유지 및 활동 조건은 아래와 같습니다. 부담 갖기보다는 어피니티버블과 함께 즐겁게 연구하고..

AI의 등장과 디자인 자동화가 본격화되면서, 이제는 작업 속도 자체보다 그 속도 안에서도 서비스의 일관성을 끝까지 유지할 수 있는지가 더 중요해졌습니다.한 때는 정말 픽셀 하나, 간격 하나에 목숨 걸며 그 정교함이 디자인의 실력을 가늠하는 기준처럼 여겨지던 시절도 있었는데요. 이제는 손으로 어떻게 만들었는지보다, 어떤 기준을 세워 그 결과가 나오도록 만들었는지가 더 중요해졌다는 것이죠.이러한 변화 속에서 디자인 시스템은 서비스를 안정적으로 운용하기 위한 핵심 인프라로 자리 잡았으며, 이를 전담 조직으로 운영하는 기업 역시 빠르게 늘어나고 있습니다.그렇다면 디자인 시스템 중에서도 가장 기초이면서도, 동시에 가장 큰 영향을 미치는 컬러 토큰 설계는 어떤 관점에서 접근해야 할까요?최근 진행했던 프로젝트에서 컬..

시민의 목소리를 데이터로UI 디자인을 할 때 늘 부딪히는 문제가 있습니다. 다양한 의견을 가진 사용자의 목소리를 어떻게 정리하고 전달할까. 개개인의 목소리에 집중하면 맥락과 목표가 저마다 다른 모두를 만족시키기 어렵고, 그렇다고 평균을 내면 누구도 대표하지 못해 모두가 만족하지 못하는 디자인이 됩니다. 그래서 보통 퍼소나로 사용자를 몇 가지 유형으로 나눠 접근하게 됩니다.정원오 서울시장 후보가 만든 '서울의 목소리'는 비슷한 문제를 도시 단위로 마주하고 있습니다. 서울 시민의 불편과 고충을 수집해 데이터 기반 해법을 찾고, 그 데이터를 공공데이터로 모두에게 공개하고 있습니다. 수천명의 시민 목소리를 어떻게 정리해 보여주고 있는지, 거기에서 어떤 정보를 얻어낼 수 있는지 시각화 측면에서 살펴보았습니다.설문..