들어가며현대 웹 개발에서 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 코딩 툴이 나왔는데요. 그중에서도 커서가 매력적으로 느껴졌던 이유는 개발 문서를 학습시킬 수 ..

들어가며현대 웹 개발에서 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..

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

* 아래 예시 이미지들 중 일부는 Animated GIF라서 로딩 시간이 필요하거나 반복재생이 잘 안 될 수 있습니다.지난 글에서 'AI를 위한 UI 패턴'이라는 주제로 최근 AI를 활용하는 서비스들이 가지는 큰 구조의 UI 패턴들을 다뤘습니다. 이번 글에서는 AI를 활용한 서비스들에서 보이는 UX 요소들을 정리해보려고 합니다. 물론, UX적인 요소이기도 하지만 기술적인 부분과도 많은 부분 겹쳐져 있습니다. 더 넓게 살펴보고 세분화하면 훨씬 더 다양한 요소들을 정리할 수 있겠지만, 일단 제가 지금껏 학습하고 실제로 접한 서비스들을 기반으로 정리를 해보겠습니다.그리고 최근 많이 이야기되는 RAG, Agent와 같이 앞으로 기술적인 부분이 더 발전하고 새로운 방식이 추가될 수도 있고, 그렇다면 UX 관점에서..

최근 2년 동안 AI는 그 어떤 것보다 빠르게 발전하며 일상생활에 사용되고 있습니다. 대나무가 자라는 속도만큼 한 달 한 달 대단한 성장과 발전을 하며 더 좋아지고 있죠. 기존에도 AI는 있었지만, 모두가 느끼듯 지금과 같은 수준은 아니었습니다. 특히 생성형 AI, 그중에서도 ChatGPT는 이제 제가 컴퓨터를 사용하다가 막히거나 질문이 생길 때 가장 먼저 떠오르는 도구가 되었습니다. 특정 분야의 지식이나 최근 정보, 코딩, 에러 해결, 영어 등 뭐든 내가 필요한 정도는 해 줄 것이란 생각이 들죠.지금은 ChatGPT, Gemini, Claude 등의 대형 파운데이션 모델과 그 대화형 AI 서비스가 현재는 가장 널리 사용되는 서비스이지만, MS Office나 Google Workspace 같은 업무 도구..

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

AI를 향한 호기심이 당연하게 여겨지는 요즘, 피엑스디(pxd)는 여러 가지를 실험하고 있습니다. AI가 세상의 자료를 학습하는 것처럼 피엑스디도 AI를 학습하고 업무에 도움이 될 작은 도구를 만들어보고 있죠. UX 라이팅 어시스턴트(UX Writing Assistant)는 그 실험의 결과물 중 하나입니다. 원하는 글쓰기 방향성을 용어집과 글쓰기 규칙의 형태로 AI에 제공하면, 이를 바탕으로 AI가 문장을 검토하고 개선안을 제안해 주는 도구입니다.성공적인 UX 라이팅을 위해 각 기업은 글쓰기 전략을 문서로 정리한 가이드라인을 만듭니다. 브랜드에 알맞은 목소리를 지키기 위한 원칙을 정하고 일관된 글쓰기를 위한 규칙을 만들죠. 하지만, 가이드라인이 있다고 하더라도 이를 제대로 지키는 건 쉽지 않습니다. 글에..

디자인 회사 홈페이지를 보면 벽에 포스트잇을 빼곡히 붙여 놓은 사진을 많이 볼 수 있는데요. 디자인 과정의 상징처럼 포스트잇을 이용한 여러 정리 방법이 있지만 어피니티 다이어그램을 사용하는 경우가 많습니다.Affinity Diagram(어피니티 다이어그램)은 관련 아이디어나 관찰을 묶어 구조화 하는 자료 정리의 기본 과정입니다. 사용자 조사를 통해 다양한 사용자 목소리를 얻었거나 문제 해결 단계에서 다양한 아이디어가 나왔을 때 우선 비슷한 것끼리 묶어가며 핵심 아이디어를 도출합니다. 이 방법의 핵심은 다양한 관점으로 아이디어를 묶어보는 것이기 때문에 여러 사람이 함께 볼 수 있도록 큰 보드에 붙였다 떼었다 하기 편한 포스트잇을 사용하는데요. 요즘은 미로나 피그마 같은 온라인 협업 툴을 이용해 작업 하기도..

pxd(피엑스디)에서는 지난 2년 동안 대규모 프로젝트를 진행하면서, 과정에서 맞닥뜨린 문제들이 있었습니다. 그래서 조직 내에서 반복적으로 발생하는 문제들을 모아 해결함으로써 조직 전체의 디자인 운영 효율을 높이는 것을 목표로 사내 스터디를 시작하게 되었죠. 스터디를 23년 2월부터 약 1년 4개월간 진행해 오면서, 그동안 연구한 내용을 바탕으로 ‘다수의 프로덕트를 운영하는 조직을 위한 디자인시스템’을 제작했습니다. 해당 시리즈를 통해 그 과정과 결과를 공유하고자 합니다. 프로젝트를 하면서 느낀 문제점 모으기 앞서 말씀드린 대로 대규모 프로젝트를 진행하면서 마주친 다양한 문제들이 있었습니다. 많은 구성원들이 이를 해결하기 위한 방법이 필요하다고 생각했고, 각자 프로젝트를 하면서 느꼈던 불편한 점, 개선되..

타이포그래피는 화면의 대부분을 구성하는 매우 중요한 요소로, 견고한 디자인 시스템을 위해 반드시 갖춰야 할 요소죠. 그러나 시스템 구축 초기 단계에서는 놓치기 쉬운 부분이기도 합니다. 피엑스디(pxd) 내부에서도 대규모 프로젝트를 진행하면서 텍스트 스타일 체계를 적용하는 과정에서 여러 어려움을 겪었습니다. 이러한 어려움을 어떻게 해결해 나갔는지 소개하겠습니다. 문제1. 확장성이 떨어지는 이름 규칙기존에는 Body 스타일의 이름을 지을 때 body 1, body 2와 같이 가장 큰 사이즈를 기준으로 내림차순으로 이름을 지었습니다. 프로젝트 초기에는 크게 문제가 없었지만, 운영을 하다 보면 꼭 아래와 같은 요청이 발생했습니다.큰 제목을 사용하게 되서, 더 큰 본문 텍스트가 필요해요. 18px정도면 좋을 것 ..

미리 알고 가면 좋은 개념원시 값(Raw value): #FF0000, rgb(255, 0, 0)와 같이 색상의 실제 값을 의미하며 가장 기본적인 색상 정의 방식입니다.시맨틱 컬러(Semantic color): 'text-primary', 'text-error'와 같이 색상의 용도나 의미에 따라 이름을 지은 토큰입니다. 용도에 따라 일관된 컬러를 사용하거나 접근성을 관리하기 위해 사용됩니다.스케일 컬러(Scale color): 'blue-100', 'gray-900'과 같이 색상을 일정한 단계로 나눠 지정한 토큰입니다. 일관된 색상 팔레트를 만들고 유지하는 데 사용됩니다.다양한 디자인 시스템의 컬러 체계 조사디자인 시스템을 만들 때 많이 참고하는 시스템은 주로 구글 머티리얼(Google Material)..

눈 깜짝할 새 기술이 발전하고 숨 가쁘게 변화하는 블록체인 세상에서, 정보는 소중한 재산이에요. '앎'으로써 앞을 내다보는 일은 위기에 대응하고 새로운 기회를 놓치지 않게 하는 힘이 되죠. 2024년에는 어떤 새로운 변화가 펼쳐질까요? 올해의 블록체인 트렌드, 그 두 번째 편을 소개할게요. BaaS for Enterprise Blockchain BaaS(Blockchain as a Service)를 이용해 경영 전반에 블록체인 기술을 활용하는 기업이 늘고 있어요. 블록체인은 미래 경쟁력 강화를 위해 필요하지만, 자체적으로 구축하려면 많은 비용과 에너지가 들어요. 기업들이 클라우드 기반으로 블록체인 기술을 제공하는 서비스인 BaaS를 찾는 이유예요. 자본력을 갖춘 기업들도 글로벌 IT 기업의 BaaS를 이..

UX 디자이너가 데이터를 보는 이유 UX 디자이너는 서비스를 설계하고, 구현해 내기 때문에 서비스의 의도를 누구보다 명확하게 파악하고 있습니다. 이용자들이 디자인 의도대로 서비스를 사용하고 있는지, 그렇지 않은지 가장 먼저 알아챌 수 있죠. 따라서 디자인이 제대로 작동하지 않을 경우, 빠르게 개선안을 제시할 수 있습니다. 이것이 프로덕트팀이 데이터를 들여다보는 이유이자 배경입니다. 데이터 기반으로 서비스 설계를 검토하고, 이용자 행동 방식을 이해해 실제 서비스 운영에 활용하는 것이죠. 데이터 분석의 세 가지 목적 1. 이용자 이해 2. 이용자의 서비스 이용 방식 파악 및 유형 구분 3. 서비스 개선 및 디자인 의사 결정 이러한 목적을 달성하기 위해 프로덕트팀은 정량적 사고와 경험을 바탕으로 데이터 기반의..

블록체인은 관련 주체들과 사회적이고 기술적인 환경이 상호작용하며 하나의 생태계를 이루고 있습니다. 블록체인 기술을 이용하는 우리는 모두 블록체인 생태계의 일부지만, 그 전반을 알기란 쉽지 않습니다. 그래서 [블록체인 연대기(the Blockchain Chronicle)]는 블록체인 생태계에 무슨 일이 일어나고 있는지 살펴보고 또 기록합니다. 차곡차곡 쌓아나간 블록체인 생태계의 오늘이 내일을 향한 어제의 기억이 될 수 있도록 말이죠. 누구나 한 번쯤은 블록체인과 AI(인공지능)에 대해 들어보셨을 겁니다. 블록체인과 AI는 우리가 미래를 말할 때 빠지지 않는 키워드지만, 자칫 막연하고 먼 이야기처럼 느껴질 수도 있죠. 블록체인과 AI는 우리 삶에서 어떤 도움을 주고 있을까요? 블록체인과 AI가 만난 미래는 ..