들어가며정적 사이트 생성(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(색조)..

들어가며최근 프로젝트에서 폼 요소로 구성된 문의하기 팝업을 구현하는 과정에서  react-hook-form을 사용하게 되었습니다. 작업이 끝나고 코드 리팩토링 작업을 하면서 유효성 및 에러 처리를 좀 더 편리하게 도와주는 라이브러리 중 yup 대해 소개하려고 합니다.Yup 소개하기yup는 데이터의 유효성 검증을 객체 스키마로 선언하여 검증하는 라이브러리입니다. yup 설치 시 react-hook-form을 연결해 주는 라이브러리도 함께 설치해줘야 합니다.* 스키마란?데이터베이스의 구조와 제약 조건에 관한 전반적인 명세를 기술한 메타데이터의 집합을 의미. // 1. 설치npm install yup @hookform/resolvers// or yarn add yup @hookform/resolvers// 2..

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

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

들어가며ChatGPT가 공개된 이후, 저는 다양한 프로젝트에서 이를 적극 활용해 왔습니다. GPT 덕분에 문제를 빠르게 해결할 수 있게 되어 업무 효율이 크게 향상되었죠. 최근에는 Claude 3이 새로운 LLM(대규모 언어 모델)으로 주목받고 있습니다. 개발사인 Anthropic에서는 Claude가 다른 LLM보다 우수한 성능을 보인다는 지표를 발표했으며, 일부 사용자들은 GPT-4를 능가하는 성능을 보인다고 평가하기도 한다고 합니다.저도 Claude의 출시 소식과 ChatGPT보다 뛰어나다는 평가를 듣고 사용해 보았는데요. 이번 글에서는 Claude가 어떤 특징을 가졌는지 알아보고 실제 저의 사용 후기를 보여드리고자 합니다.Claude Ai란?홈페이지 Docs에서는 Claude를 다음과 같이 소개하고..

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

'언어장벽' 너머에서는 어떤 이야기를 나누고 있을까요? 더 많이 배워서 사고의 폭을 넓히고 싶은 마음을 언어의 한계 때문에 포기할 순 없죠. 다양한 언어, 문화권의 콘텐츠를 번역하는 '물 건너온 UX'와 함께, 전 세계를 탐험하며 틀 없이 자유로운 생각을 펼쳐봐요. AI 기술이 빠른 속도로 발전하면서 유통, 금융, 의료 등 다양한 분야에 도입되고 있어요. 특히 생성형 AI는 인간 고유의 영역이라고 여겨지던 창작까지 해내면서 세상을 깜짝 놀라게 했죠. 간단한 메일부터 장편소설까지, 뭐든지 AI가 대신 써주는 세상에서 UX 라이팅은 어떤 방향으로 나아가야 할까요? UX 라이터라는 직업은 AI에 밀려 이대로 사라지는 걸까요? 직업 정체성을 고민하는 모든 UX 라이터에게 팟캐스트 ‘Writers in Tech’..

NFT(Non-Fungible Token)는 이름 그대로 다른 무엇이 ‘대체할 수 없는' 제각기 고유한 것이에요. 똑같은 곰 인형이 수만 개씩 있다 해도 다른 곰 인형이 내가 품은 곰 인형을 대신할 수 없듯, NFT는 ‘내 것'으로서 유일성을 가져요. 물성이 없는 디지털이지만, 소유할 수 있는 아날로그의 감성을 담고 있죠.이수지 작가는 NFT ‘춤을 추었어'로써 이런 NFT의 감성과 가장 아날로그적인 책을 연결 지었어요. 그의 이야기는 모리스 라벨의 무곡 ‘볼레로’를 만나 열여덟 점의 그림이 되고, 각 그림은 선율에 맞춰 춤추는 애니메이션 NFT가 돼요. NFT는 ‘춤을 추었어'의 일부이자 나만이 가질 수 있는 이야기죠. 책과 그림, 그림책과 음악, 애니메이션과 NFT, 그리고 다시 NFT와 책을 잇댄 ..

'요술 방망이'라는 AI, 직접 써보니...생성형(Generative) AI의 등장 이후 주변이 온통 AI 얘기로 떠들썩합니다. 대부분 새로운 기능이 얼마나 놀라운지, 발전된 기술이 무엇을 가능하게 할지에 대한 이야기죠. 들려오는 소문으로는 AI가 명령어만 입력하면 어떤 결과물이든 원하는 대로 뚝딱 나오는 ‘요술 방망이’처럼 느껴집니다. 정말 그럴까요? 생성형 AI 미드저니(Midjourney)를 사용하면서 직접 알아봤습니다.  PFP NFT 344개 나와라, 뚝딱!우선 미드저니와 함께 세상 모든 개를 위한 PFP(profile picture) NFT를 만들어보자는 목표를 세웠습니다. 요크셔테리어 한 마리와 함께 살고 있는 저를 포함해 pxd에는 반려견을 둔 동료들이 많은데요. 반려인들이 메신저나 소셜 ..

들어가며지난해 12월, 사내에서 사용할 목적으로 WEB3 pxd Wallet을 개발하기 시작했습니다.이전에 WEB3 플랫폼에서 UI/UX를 고민하며 UI를 개발하고 일부 프론트앤드 작업을 해본 경험은 있었지만, 실제 블록체인과 스마트 컨트랙트와 관련된 프론트앤드 개발은 처음이었기에 거의 0에서 시작하는 느낌이었습니다.개발 과정에서 블록체인 네트워크의 테스트넷을 사용해보며, ERC-20 및 ERC-721 토큰에 대한 이해를 쌓았고, 깊이는 아니지만 Solidity를 활용해 간단한 스마트 컨트랙트를 작성하고 이를 실제 블록체인 테스트넷에 배포하는 경험을 하며 이 과정에서 새로운 지식을 습득하기도 했습니다.비록 업무와 병행하며 진행되었고, 우선순위에서 밀려 잠시 중단된 적도 있었지만, 꾸준히 진행한 끝에 마무..

지난 2024년 8월 23일 Favorite Medium(이하 FM)과 피엑스디는 기술 기반의 UX 디자인 컨설팅 역량 강화와 글로벌 시장 진출을 위한 업무협약(MOU)을 체결했어요.이번 MOU는 피엑스디가 국내 UX 디자인 컨설팅 분야에서 20여 년간 축적한 경험과 FM의 기술 역량을 결합하여 국내는 물론 북미, 일본, 유럽 등 글로벌 시장으로의 진출을 확대하기 위함이에요. 양사는 이번 협약으로 UX 리서치부터 디자인 및 솔루션 개발에 이르는, 이른바 ‘풀 스택(full-stack)' 소프트웨어 컨설팅 회사로 서비스 범위를 확장할 계획입니다.FM은 2007년 샌프란시스코에서 설립되어 에너지, 헬스케어, 핀테크 소비재, AI, 블록체인, IoT 등 다양한 산업 분야의 글로벌 기업과 사용자를 위해 약 12..