들어가며프로젝트를 시작하면 공통 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 공식 블로그를 보면 ..

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

들어가며OpenAI의 엔지니어링 팀이 5개월 동안 약 100만 줄의 프로덕션 코드를 만들었다. 놀라운 건 규모가 아니다. 수동으로 작성한 소스코드가 단 한 줄도 없다는 점이다.소수의 엔지니어가 Codex 에이전트에게 작업을 지시하고, PR을 검토하고, CI 파이프라인을 관리했을 뿐이다. 애플리케이션 로직, 문서, CI 설정, 모니터링 설정까지 전부 AI 에이전트가 만들었다. 이 실험에서 OpenAI가 얻은 가장 중요한 교훈은 이것이다:"어려운 건 AI 에이전트가 아니다. 에이전트가 일할 환경(harness)이 어렵다." 이 환경을 설계하는 분야가 바로 하네스 엔지니어링(Harness Engineering)이다. 하네스 엔지니어링이란?비유로 이해하기"하네스(harness)"는 말에게 씌우는 마구(馬具)다...

들어가며AI 코딩 에이전트에게 "로그인 폼 만들어줘"라고 했더니, 있지도 않는 props를 쓰고, import 경로를 틀리고, 프로젝트 테마와 전혀 안 맞는 결과물이 나온 경험이 있나요?shadcn/ui가 더 확실하고 사용하기 쉽게 shadcn/cli v4로 업데이트 되었어요. shadcn/ui가 AI 시대에 주목받는 이유shadcn/ui는 이미 주목을 많이 받았던 UI 프레임워크이지만 AI시대가 되며 더더욱 많이 주목받고 활용되고 있습니다.일반적인 컴포넌트 라이브러리와 다르죠. npm에서 패키지를 설치하는 방식이 아니라, 컴포넌트 코드를 직접 프로젝트에 복사하는 구조입니다.npx shadcn@latest add button# → src/components/ui/button.tsx 파일이 생성됨 이 "코..