티스토리

pxd story
검색하기

블로그 홈

pxd story

story.pxd.co.kr/m

UX에 관한 pxd사람들의 진지하거나 소소한 수다

구독자
23
방명록 방문하기
공지 2018 pxd story 포스트 모⋯ 모두보기

주요 글 목록

  • Next.js 레이아웃과 템플릿 - 동작 원리와 최적화 들어가며Next.js를 사용해 오면서 레이아웃 컴포넌트는 프로젝트 초반에 구성을 하며 생성하고 사용을 하지만, 템플릿은 그에 비해 사용을 잘 안 하게 되는 것 같아 이 둘에 대해 살펴보았습니다.글로 이해 하는 것보다 코드를 천천히 읽어보면 더욱 이해가 수월할 것 같습니다. 레이아웃의 내부 동작레이아웃 컴포넌트는 Next.js의 서버 컴포넌트 아키텍처에서 특별한 위치를 차지합니다.기본적으로 서버 컴포넌트로 동작하며, 한 번 렌더링 된 후에는 세그먼트 트리에서 지속적으로 재사용됩니다.// app/layout.tsximport { headers } from 'next/headers'export default async function RootLayout({ children,}: { children: Rea.. 공감수 0 댓글수 1 2025. 2. 17.
  • 커서 AI, 코파일럿에 이어 써봤습니다 피엑스디(pxd)의 개발 조직인 XE(eXperience Engineering) 그룹은 개발자를 위한 여러 AI툴을 업무에 활용해 보고 있습니다. 지난 글에서는 깃허브(Github)의 코파일럿(Copilot)의 사용기를 전했는데요. 이번에는 커서(Cursor AI)를 써보고 그 후기를 전합니다. 이미 1년 동안 코파일럿을 써본 터라 하려고 하지 않아도 자연스럽게 두 AI툴을 비교해 보기도 했죠. 덧붙여 저희는 맥(Mac) 운영 체제에서 비주얼 스튜디오 코드(VSCode) 편집기를 활용했습니다.학습과 호환이 용이한 커서의 첫인상커서는 첫인상부터 좋았습니다. 챗GPT(ChatGPT)가 공개된 이후 세상에 많은 AI 코딩 툴이 나왔는데요. 그중에서도 커서가 매력적으로 느껴졌던 이유는 개발 문서를 학습시킬 수 .. 공감수 5 댓글수 0 2025. 2. 4.
  • 라우팅 인터셉트 기능을 활용한 모달 인터랙션 향상 들어가며Intercepting Routes라고 혹시 들어보셨나요?Next.js 13.3 버전에 추가된 기능이라고 하는데 저는 최근에 알게 되었습니다.이 기능을 활용하면 모달의 사용성과 사용자 경험을 개선할 수 있을 것 같다는 생각을 하여 공유하고자 합니다.Intercepting Routes란?Intercepting Routes는 Next.js에서 도입된 새로운 라우팅 기능입니다. 이 기능을 사용하면 현재 레이아웃 내에서 다른 경로의 콘텐츠를 "가로채서" 표시할 수 있습니다.사용자가 특정 경로로 이동할 때, 그 경로의 콘텐츠를 현재 페이지 컨텍스트 내에서 표시하는 것입니다. 이는 주로 모달, 슬라이드 오버, 또는 다른 형태의 오버레이 UI 요소를 구현할 때 유용합니다.작동 방식 및 구현 방법Intercep.. 공감수 4 댓글수 2 2025. 1. 20.
  • [UX 리서치] 블록체인이 만드는 팬덤의 진화 #4편 pxd UX리서치팀은 지난 17개월 동안 약 8건의 리서치 프로젝트를 진행하며 20명 이상의 팬과 아티스트를 만났습니다. 그리고 '블록체인이 만드는 팬덤의 진화' 시리즈를 통해 팬 활동이 블록체인 기술을 만나 그리는 새로운 팬 활동의 모습을 소개하고자 합니다. [Cycle 4] 비음원 콘텐츠: 발행 및 판매 ↔ 소비/탐색/공유 WEB2: 포토카드를 매개체로 얻는 유대감과 소속감마케팅의 일환으로 팬덤이 소비할 수 있는 다양한 콘텐츠가 생겨나고 있습니다. 2022년 12월 한국소비자원에서 실시한 ‘팬덤 마케팅 소비자 문제 실태 조사’에 따르면, 팬은 주로 구매하는 팬덤 마케팅 품목으로 77.8%가 ‘음반’으로 응답했으며, 구매 목적으로는 음반 수집 및 음악 감상 외 ​​‘음반에 포함된 굿즈 수집’이 52.7.. 공감수 10 댓글수 0 2025. 1. 15.
  • 어피니티버블 - 베타 버전 공유 어피니티버블(Affinity Bubble)은 수집된 ‘다수의 사용자 목소리’로부터 핵심 주제를 추출하여 계층적으로 시각화하고 인사이트 리포트까지 제공하는, pxd 업무툴입니다.* 본문 하단에 있는 URL을 통해 직접 사용해 보실 수 있어요!pxd에서는 사용자 의견으로부터 인사이트를 얻기 위해 어피니티 다이어그램을 사용했는데요. 주로 포스트잇을 활용하는 이 방법은 장시간동안 여러 디자이너들과의 협업이 필요합니다.그에 비해, 어피니티버블은 LLM을 이용하여 보로노이 트리맵 형식으로 한눈에 그리고 빠르게 데이터의 계층구조를 보여주죠. 일상에서 흔히 볼 수 있는 보로노이 구조가 비누거품 모양이라, ‘방법론+시각화’ 를 의미하는 단어들을 조합하여 ‘어피니티버블’이라고 이름 붙였습니다.텍스트 데이터 분석에서 널리 .. 공감수 2 댓글수 0 2025. 1. 13.
  • [UX 리서치] 블록체인이 만드는 팬덤의 진화 #3편 pxd UX리서치팀은 지난 17개월 동안 약 8건의 리서치 프로젝트를 진행하며 20명 이상의 팬과 아티스트를 만났습니다. 그리고 '블록체인이 만드는 팬덤의 진화' 시리즈를 통해 팬 활동이 블록체인 기술을 만나 그리는 새로운 팬 활동의 모습을 소개하고자 합니다.  [Cycle 3] 팬클럽: 모집 ↔ 가입 및 활동팬클럽 활동의 핵심은 연대감에 있습니다. 저희는 이것을 팬덤과 아티스트의 연대, 팬 간 연대 두 가지 관점으로 바라보려고 합니다. 3-1. 팬덤과 아티스트의 연대먼저 팬덤과 아티스트의 연대는 공생하는 공간의 특성과, 이 공간에서 이루어지는 소통 방식에 따라 영향을 받는다는 것을 확인했습니다. WEB2: 정제되지 않은 여론이 오가는 팬덤 플랫폼케이팝 팬덤은 아티스트와 팬 간 결속력이 독보적이라는 특징.. 공감수 10 댓글수 1 2025. 1. 7.
  • 코파일럿, 1년 동안 써봤습니다 텍스트와 이미지, 영상과 음악까지. 이제는 생성형 AI가 무엇이든 만들어줄 수 있을 것만 같습니다. 개발자가 사용하는 코드 역시 AI의 생성 대상에서 예외가 아닌데요. 간단한 조작으로 원하는 코드를 뚝딱 만든다니 업무 효율을 높일 수 있겠다는 기대가 드는 만큼 정말로 AI가 내가 만족하는 수준의 코드를 만들어줄지 의문이 들기도 합니다.가만히 앉아 있으면 궁금증은 해결되지 않기에, 피엑스디(pxd)의 개발 조직인 XE(eXperience Engineering) 그룹은 개발자를 위한 여러 AI 툴을 업무에 활용해 보기로 했습니다. 먼저 깃허브(GitHub)의 코파일럿(Copilot)을 사용해 봤죠. 이 글에는 코파일럿의 기본적인 사용법과 1년간 사용하며 느낀 점을 담았습니다. 참고로 제가 코파일럿을 사용한 .. 공감수 5 댓글수 4 2025. 1. 2.
  • [UX 리서치] 블록체인이 만드는 팬덤의 진화 #2편 pxd UX리서치팀은 지난 17개월 동안 약 8건의 리서치 프로젝트를 진행하며 20명 이상의 팬과 아티스트를 만났습니다. 그리고 '블록체인이 만드는 팬덤의 진화' 시리즈를 통해 팬 활동이 블록체인 기술을 만나 그리는 새로운 팬 활동의 모습을 소개하고자 합니다.  [Cycle 2] 오프라인 이벤트: 개최 ↔ 참여WEB2: 암표와 전쟁 치르는 팬덤공연 예술 문화 시장에 골치 덩어리로 빠지지 않고 언급되는 존재는 바로 ‘암표’입니다. 암표상은 아티스트를 향한 팬의 순수한 심리를 이용해 이득을 취하려고 하죠. 최애를 보기 위해 정가보다 훨씬 높은 값을 내고서라도 구매하려고 할 테니 말이죠. 암표상들은 ‘매크로'라는 자동화 프로그램을 사용해 표를 예매하기 때문에 일반 팬으로써는 공정한 방식으로 표를 확보하기는 어.. 공감수 6 댓글수 5 2024. 12. 25.
  • React 디자인 패턴 들어가며이번 프로젝트에서 Accordion 컴포넌트를 Headless 방법으로 만들어보면서 "Compound Pattern"이라는 디자인 패턴에 대해 알게 되었습니다. 이와 관련해 React의 다른 디자인 패턴들에 대해 궁금증이 생겨 몇 가지를 찾아보았습니다.검색해 보니 정말 다양한 패턴들이 있었는데요, 그중 몇 가지를 소개해 보려 합니다. 디자인 패턴우선, 디자인 패턴의 사전적 의미가 무엇인지 Chat Gpt에게 물어보았습니다.소프트웨어 설계에서 자주 발생하는 문제를 해결하기 위한, 재사용 가능한 모범적인 설계 구조를 의미합니다.사전적 의미에서도 알 수 있듯이, 디자인 패턴은 컴포넌트를 만들 때 주로 고려하는 재사용 가능성, 가독성, 확장성 등을 높여 개발 효율성을 향상시키는 코드를 설계할 수 있는 일.. 공감수 7 댓글수 4 2024. 12. 20.
  • UX 리서치에서 통계 분석하기: 집단 평균 비교 분석 들어가며사용성이 좋은 앱의 조건으로 어떤 요소가 떠오르나요? 적절한 정보 배치, 가독성, 접근성 등이 떠오르나요? 지난 프로젝트에서 우리는 '좋은 사용성'을 'Task 수행 시간'이라는 지표를 기준으로 평가해 보았습니다. 평가 목표는 주어진 시간 내에 빠르고 정확하게 태스크를 수행할 수 있는 레이아웃을 데이터 기반으로 가려내는 것이었습니다.어떤 상황에서 '빠른 수행 시간'이 곧 '좋은 사용성'이 될 수 있을까요? 티켓을 구매하는 하는 상황을 떠올려 볼까요? 좌석을 빠르게 선점하기 위해 결제 완료까지 가는 시간이 최소한으로 걸려야 하겠지요. 또는 운전 중 인포메이션 화면을 조작하는 상황을 생각해 봅시다. 전방 주시와 동시에  빠르고 정확한 화면 조작이 필요하겠죠. 이런 상황에서 좋은 사용성은 짧은 수행 시.. 공감수 5 댓글수 5 2024. 12. 20.
  • [다녀왔습니다] 디지털과 현실의 교점, '춤을 추었어 Danced Away' 현실의 그림은 디지털로 넘어가 NFT 속 애니메이션으로 다시 태어나고, NFT 속 작품은 다시 현실로 무대를 옮겨 모두를 만나기도 합니다. 참으로 경계가 희미해진 시대에 살고 있다는 생각이 들죠. 아날로그는 아날로그에만 그치지 않고, 디지털은 디지털에만 그치지 않기 때문입니다. 책은 멈춰있는데 디지털 매체는 움직일 수 있고, 보는 것과 듣는 것을 함께할 수 있으니까요. - 이수지 작가의 인터뷰 중 현대어린이책미술관의 ‘춤을 추었어 Danced Away’ 전시에 다녀왔습니다. 이수지 작가와의 지난 인터뷰에서 작가는 그림책을 NFT와 연결한 이유에 대해 위와 같이 말했는데요. 전시의 경험이 작가의 말을 떠올리게 했습니다. 멈춰있는 그림이 우리를 다음 장면으로 이끌고, 공간을 가득 메운 Danced Away .. 공감수 4 댓글수 4 2024. 12. 17.
  • AI를 활용한 Figma Plugin 개발기 (Cursor IDE 활용 사례) 들어가며pxd는 디자인 도구로 Figma를 사용하고 있습니다. 디자인과 개발 팀 모두 Figma를 이용해 화면 작업을 진행하고 있는데, 이 과정에서 몇 가지 불편한 점을 AI 기술을 활용하여 개선하고자 해당 프로젝트를 시작하게 되었습니다. 프로젝트의 배경디자인파트에서 Scaffold design system을 구축하면서 Color, Text Style 등을 변수로 설정하기 시작했고, 개발파트도 이에 맞춰 SCSS 변수를 동일하게 설정해 사용하고 있었습니다. 하지만 이 과정에서 한 가지 불편한 점이 발견되었습니다.현재 사용 가능한 Figma Plugin 중에서 Text Styles을 코드로 export할 때, 폰트 사이즈를 정의된 variables와 자동으로 매칭시켜 주는 기능이 없었던 것입니다. 이로 인.. 공감수 4 댓글수 4 2024. 12. 17.
  • [UX 리서치] 블록체인이 만드는 팬덤의 진화 #1편 들어가며케이팝은 독특한 팬문화를 가지고 있습니다. 전 세계적으로 케이팝이 인기를 끌며 엔터테인먼트 업계는 코어 팬덤을 겨냥하는 전략에 점점 주목하고 있죠. 이러한 흐름에 따라 팬 활동은 새로운 기술과 결합하며 다양한 모습으로 진화하고 있습니다. 팬 활동이 블록체인 기술을 만나면 어떤 모습일까요? pxd UX리서치팀은 지난 17개월 동안 약 8건의 리서치 프로젝트를 진행하며 20명 이상의 팬과 아티스트를 만났습니다. 이 과정에서 UX리서치팀이 깊게 이해한 팬과 크리에이터가 그리는 새로운 팬 활동의 모습을 총 4편에 걸쳐 소개하고자 합니다. 팬과 아티스트 활동 이해하기팬 활동은 아티스트의 활동 사이클을 주축으로 형성됩니다.  첫째, 아티스트는 음원과 앨범을 발매하고, 팬은 이를 구매합니다. 팬 활동의 첫걸음.. 공감수 10 댓글수 7 2024. 12. 12.
  • 한국어 감정 단어 관계 시각화 한국어 감정 단어를 정리한 표가 트위터에서 인기를 얻었습니다. 자신의 감정을 표현하는데 적당한 단어가 잘 떠오르지 않는다는 트윗에 인용으로 한국어 감정단어의 목록 작성과 차원 탐색 논문에서 수집한 감정단어 434개 한국어 감정 단어 목록을 공유해 주셨습니다. 요즘 미쳤다라는 표현이 심지어 방송에서도 남용되어 우려하는 목소리가 많은데요. 감정 어휘의 부족이 소통을 피상적으로 만드는 것 같습니다. 감정 어휘가 늘어 날 수록 자신의 감정을 보다 적확하게 표현하는것 뿐 아니라 자기 감정을 정확하게 아는데도 도움이 된다고 합니다. 어피니티 버블다만 가나다 순으로 나열된 이런 표 형태는 한눈에 잘 들어오지 않아 아쉬웠는데요. 우선 비슷한 의미끼리라도 묶어보면 좋을 것 같았습니다.어피니티 버블은 텍스트 임베딩을 이용.. 공감수 3 댓글수 1 2024. 12. 11.
  • [다녀왔습니다] 디지털 르네상스를 이끌 두 기둥, 블록체인과 AI KBW 2024로 엿본 미래 기술 트렌드지난 9월 글로벌 블록체인·웹3 축제 ‘Korea Blockchain Week(이하 KBW)’에 다녀왔습니다! 올해 KBW에서 단연 눈에 띄었던 주제는 바로 AI였어요. AI 포럼 ‘AI WORLD 2024 : ​Unlimited Scalability(무한 확장)’가 연계 행사로 열렸고, 전 세계 300여 명의 연사가 참여한 메인 콘퍼런스 ‘IMPACT’에서 가장 큰 비중의 세션 주제도 AI였죠.다채로운 프로젝트와 흥미로운 논의 사이에서 공통으로 뽑을 수 있는 핵심은 크게 두 가지였어요. 이제 서로 떼려야 뗄 수 없게 된 블록체인과 AI의 호혜적 관계, 두 기술을 바탕으로 ‘디지털 르네상스’가 펼쳐질 미래. 블록체인과 AI가 이끄는 디지털 르네상스는 어떤 모습일지 .. 공감수 7 댓글수 6 2024. 12. 11.
  • [UX 운영이 만드는 가치] 서비스의 유지 보수부터 성장까지 새로 지은 집의 청소와 관리가 제대로 이뤄지지 않는다면 어떨까요? 아마 얼마 가지 않아 집안 곳곳에는 먼지가 쌓이고 문제가 생길 겁니다. 제품과 서비스도 집과 비슷합니다. 변화하는 기술과 사용자의 요구에 맞춰 기능을 더하거나 빼는 등 주기적인 관리가 필요하죠. 서비스를 최적의 상태로 유지하는 이 업무를 ‘UX 디자인 운영 업무' 또는 ‘UX 디자인 유지 보수'라고 부르며, 피엑스디(pxd)에는 이런 업무를 전문으로 수행하는 팀이 있습니다. 이번 글에서는 피엑스디가 진행했던 운영 프로젝트 사례를 소개하며 운영 업무를 통해 이룬 새로운 가치와 안정적인 운영 업무를 위해 필요한 것을 공유하고자 합니다.협업 솔루션 A(이하 A 서비스)는 피엑스디가 7년간 운영을 담당했던 서비스로, 기업 내의 프로젝트팀 생성과 .. 공감수 3 댓글수 1 2024. 12. 3.
  • JavaScript 웹 컴포넌트로 재사용 가능한 UI 구축하기 들어가며최근의 프로젝트 환경은 대부분 React, Vue, Angular와 같은 프레임워크를 기반으로 합니다. 이러한 프레임워크들은 컴포넌트 기반 아키텍처를 통해 재사용 가능한 UI를 구성하여 효율적인 개발을 가능하게 했죠.하지만 프레임워크 환경이 아닌 전통적인 HTML, CSS, JavaScript 환경에서 작업해야 하는 경우도 있습니다. 이때 웹 표준 기술만으로도 프레임워크가 제공하는 강력한 기능을 구현할 수 있는 방법이 있는데요, 그것이 바로 '웹 컴포넌트'입니다.웹 컴포넌트를 사용하면 HTML, CSS, JavaScript만으로 재사용 가능하고 캡슐화된 커스텀 컴포넌트를 만들 수 있습니다. 이를 통해 특정 프레임워크에 종속되지 않고도 프레임워크와 유사한 컴포넌트 기반 개발을 할 수 있습니다. 웹 .. 공감수 1 댓글수 1 2024. 11. 25.
  • 도전! AI와 한 팀 되기 #2 UI 디자인 생성형 AI를 신입사원 삼아 함께 ‘반려동물 동반 가능 장소 검색 및 추천 서비스’를 모의 기획하고 있어요. 1편에서는 데스크 리서치로 기존 유사 서비스와 실제 사용자의 의견을 파악했는데요. 이번에는 서비스에 들어갈 주요 기능을 정리하고 IA(Information Architecture, 정보구조도)를 만들게요. 이를 시각화한 와이어프레임(Wireframe, 화면설계서)까지 그리면 완성입니다! 서비스 IA를 만들어보자  앞서 챗GPT(ChatGPT), ‘챗 사원’이 분석한 자료로 정리한 서비스 주요 기능은 크게 두 가지였어요.사용자 리뷰를 토대로 한 필수 기능 - 장소 위치 탐색, 커뮤니티, 예약기존 유사 서비스를 참고한 추가 기능 - 콘텐츠 큐레이션, 검색, 지도, 장소별 세부 정보이를 바탕으로 다시 .. 공감수 2 댓글수 1 2024. 11. 22.
  • 도전! AI와 한 팀 되기 #1 데스크 리서치 AI를 공부하면 할수록 실제로 사용해 보면서 이해도를 높여야 한다는 생각이 들어요. AI가 아무리 편하다고 하지만, 업무에 활용하려면 미리 연습이 필요하죠. 앞으로 능숙하게 사용할 수 있도록 AI와 함께 모의 서비스를 기획하기로 했어요. 지금부터 여러 서비스 기획자와 ‘신입사원 AI’가 한 팀을 이뤄 새로운 프로젝트를 진행할게요.우리의 첫 번째 목표는 기존 서비스 현황을 살피고 사용자의 불편을 개선할 수 있는 기능을 정리하는 거예요! 기존 서비스의 UI/UX를 알아보자프로젝트 주제는 ‘반려동물 동반 가능 장소 검색 및 추천 서비스' 개발로 정했어요. ‘반려 인구'가 1,500만 명에 달하는 시장 상황과 우리 팀원 모두가 반려동물을 기르고 있어 소비자 의견을 잘 알고 있다는 점을 고려했죠. 이제 주제에 맞.. 공감수 7 댓글수 5 2024. 11. 20.
  • 유입 경로와 검색어 기반으로 사용자 세분화하기 사용자 경험 기반의 상품을 개발하거나 서비스를 구축할 때, 또는 개선할 때 가장 많이 사용하는 방법이 퍼소나(Persona)입니다. 타겟층을 명확히 하고, 그들이 원하는 바를 파악해 상품과 서비스에 녹여내는 것이죠. 그리고 퍼소나를 만들 때 주로 인터뷰, 설문 조사 등 정성적인 방법을 주로 사용합니다. 하지만 이는 적지 않은 시간과 비용이 투입되는 작업이죠. 피엑스디(pxd)는 구글 애널리틱스(Google Analytics, GA)의 정량 데이터를 바탕으로 사용자를 세분화해서 퍼소나 구축에 활용할 수 있는 ‘데이터 드리븐 퍼소나(Data Driven Persona, DDP)’를 개발하고 있습니다. 이번 글에서는 퍼소나를 구축하기 전에 피엑스디 홈페이지 및 블로그 데이터로 사용자를 분류하는 예시를 보여드리.. 공감수 8 댓글수 5 2024. 11. 15.
  • 블록체인 서비스 리서치와 사용자 이야기 지난 2022년 여름부터 블록체인 기반 게임 플랫폼의 개편을 시작으로 약 2년 동안 블록체인 산업에 관한 리서치를 진행했습니다. DeFi(Decentralized Finance), NFT(Non-Fungible Token) 시장 서비스 등을 조사하며 많은 사용자를 만나 이야기를 나눴죠. 조사와 별개로 그들의 이야기를 듣고, 새로운 사실을 배운 순간들은 매우 유익하고 즐거웠습니다. 이번 글에서는 그중에서 특히 인상 깊었던 사용자들과의 만남을 소개합니다.블록체인 게임을 왜 할까? 타운스타라는 게임은 보통 100~1,000만 원 정도로 처음에 투입하는 금액부터 달라요. 암호화폐를 받을 수 있는 NFT를 사지 않으면 수익 없이 게임만 하다가 끝나는 경우도 있어요. - 국내 사용자 A 씨 블록체인 게임 사용자들과.. 공감수 21 댓글수 6 2024. 11. 12.
  • 네이티브 앱과 같은 사용자 경험 - PWA (feat. 웹 크롤링 cheerio) 들어가며어머니께서 매주 듣는 콘텐츠가 있는데 해당 사이트에서는 아이폰에서 바로 재생 지원을 하지 않고 있었습니다. 안드로이드에서 아이폰으로 기기변경을 하신 후 해당 콘텐츠를 듣지 못하게 되어 제가 xml을 이용해 구글 시트에서 해당 콘텐츠의 URL을 가져와서 노션에 사용하시기 편하게 오디오로 올려주는 것을 거의 2년 동안 했었는데요.바쁘거나 잊어버려서 놓치게 되면 길게는 몇 달까지도 딸한테 차마 올려달라고 말은 못 하고 못 듣고 계셨던 게 마음에 걸려 저걸 어떻게든 자동화 시켜야겠다! 라는 마음을 먹고 이번에 만들게 되었습니다.  기존 사이트 콘텐츠 크롤링 하기요 문제는 기존에 영민 선임님이 포스팅 한 cheerio로 쉽게 해결할 수 있었습니다.다만 타 사이트의 자료를 가져오는 것이라 CORS 문제를 만.. 공감수 10 댓글수 7 2024. 11. 11.
  • 더 편리한 창작을 위한 생성형 AI의 숙제 프로덕트 디자이너의 생성형 AI 사용기‘창작물’ 하면 뭐가 떠오르시나요? 프로덕트 디자이너로서 늘 디자인을 하고 있지만, 뭔가를 창작하는 일은 늘 어렵습니다. 괜히 부담감이 느껴지곤 하죠. 이런 창작의 어려움이 저 혼자만의 일은 아닐 겁니다. 원하는 대로 결과물을 만들어준다는 생성형 AI의 도움을 받는다면 어떨까요. 생성형 AI 챗GPT(ChatGPT)와 미드저니(Midjourney)*로 콘텐츠를 만들며 편리한 창작을 위해 필요한 조건들을 살펴봤습니다.*미드저니 V6 기준 생성형 AI로 네 컷 만화를 만든다면?여러 창작물이 있겠지만 그중에서도 저는 가장 먼저 떠오르는 글과 그림을 골랐습니다. 글과 그림을 각각 따로 만들기보다는 하나의 이야기를 만든 뒤에, 이 이야기를 표현하는 네 장의 이미지를 생성, ‘.. 공감수 24 댓글수 2 2024. 11. 1.
  • [Scaffold Design System] 6. 한 걸음씩 꾸준하게, 디자인 시스템 제작기 그동안 소개해 드렸던 스캐폴드 디자인 시스템(Scaffold Design System, 이하 스캐폴드 시스템)은 업무의 효율성을 높이고 싶었던 구성원의 자발적인 스터디를 통해 만들어진 결과물입니다. 오늘은 하나의 목표 아래 같은 방향을 바라보며 힘을 모았던 저희의 이야기를 소개하려고 합니다. 사내에서 스터디를 운영하는 어려움과 그 극복 방안, 완성한 스캐폴드 시스템을 효과적으로 전파하기 위해 기울였던 노력을 담았죠. 하나의 제작기라고 생각해 가볍게 읽어주시면 좋겠습니다. 효과적으로 운영되는 스터디 만들기사내에서 진행하는 스터디에는 뒤따르는 어려움이 많습니다. 업무와의 우선순위를 고려하다 보면 계획대로 스터디가 이뤄지지 않을 때가 많죠. 저희도 비슷한 어려움을 겪고는 했는데요. 시행착오를 겪으며 스터디를 .. 공감수 2 댓글수 0 2024. 10. 30.
  • [Scaffold Design System] 5. 구조가 명확해진 컴포넌트 피엑스디(pxd)는 그동안 다양한 프로젝트에서 각기 다른 규칙으로 컴포넌트를 만들어 왔습니다. 이 때문에 매번 다른 디자인 시스템 구조를 파악해야 했기에 작업 및 소통 효율이 떨어졌죠. 이를 해결하기 위한 기준 디자인 시스템인 스캐폴드 디자인 시스템(Scaffold Design System)을 구축하면서 컴포넌트를 일관된 기준으로 정리하고, 제작한 과정을 공유하고자 합니다. 반복되는 컴포넌트 제작, 서로 다른 용어프로젝트를 새로 시작하면서 디자인시스템을 만드는 작업자들과 진행 중인 프로젝트에 합류한 구성원들은 특히 컴포넌트를 새로 제작하는 데 많은 시간을 들여야 했습니다. 디자이너와 기획자, 프론트엔드 개발자까지 직군마다 아래와 같은 이유로 큰 불편함을 겪었죠.프로젝트를 시작할 때마다 수많은 컴포넌트를 .. 공감수 3 댓글수 0 2024. 10. 25.
  • 증분 정적 재생성 (ISR) 들어가며정적 사이트 생성(SSG)과 서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR)의 기능을 모두 포함하고 있는 프레임워크인 Next.js에서는 서버 사이드 렌더링(SSR)보다 정적 사이트 생성(SSG) 이 높은 성능을 지니기 때문에 정적 사이트 생성(SSG)의 사용을 권장하고 있습니다. 하지만 정적 사이트 생성(SSG)만으로는 분명 동적인 페이지를 만드는 데 한계가 있습니다.이로 인해 정적 사이트 생성(SSG)의 개념과 서버 사이드 렌더(SSR) 개념의 중간 영역쯤으로 볼 수 있는 증분 정적 재생성(ISR)이 등장하게 되었고, ISR로 인해 Next.js의 기능은 더욱 확장되었습니다. 이 글에서는 ISR의 개념과 작동 방식, 사용 예시,  Next.js에서의 예시 코드, 한계점 등에 대.. 공감수 5 댓글수 2 2024. 10. 24.
  • [Scaffold Design System] 4. 균일한 대비값을 가진 스케일 컬러 시스템 미리 알고 가면 좋은 개념원시 값(Raw value): #FF0000, rgb(255, 0, 0)와 같이 색상의 실제 값을 의미하며 가장 기본적인 색상 정의 방식입니다.시맨틱 컬러(Semantic color): 'text-primary', 'text-error'와 같이 색상의 용도나 의미에 따라 이름을 지은 토큰입니다. 용도에 따라 일관된 컬러를 사용하거나 접근성을 관리하기 위해 사용됩니다.스케일 컬러(Scale color): 'blue-100', 'gray-900'과 같이 색상을 일정한 단계로 나눠 지정한 토큰입니다. 일관된 색상 팔레트를 만들고 유지하는 데 사용됩니다. HSL 컬러 모델의 한계, 균일한 대비값 제작의 어려움HSL 컬러 모델에서는 Lightness(밝기) 값이 동일하더라도 Hue(색조).. 공감수 6 댓글수 1 2024. 10. 22.
  • React-hook-form + Yup 라이브러리 들어가며최근 프로젝트에서 폼 요소로 구성된 문의하기 팝업을 구현하는 과정에서  react-hook-form을 사용하게 되었습니다. 작업이 끝나고 코드 리팩토링 작업을 하면서 유효성 및 에러 처리를 좀 더 편리하게 도와주는 라이브러리 중 yup 대해 소개하려고 합니다.Yup 소개하기yup는 데이터의 유효성 검증을 객체 스키마로 선언하여 검증하는 라이브러리입니다. yup 설치 시 react-hook-form을 연결해 주는 라이브러리도 함께 설치해줘야 합니다.* 스키마란?데이터베이스의 구조와 제약 조건에 관한 전반적인 명세를 기술한 메타데이터의 집합을 의미. // 1. 설치npm install yup @hookform/resolvers// or yarn add yup @hookform/resolvers// 2.. 공감수 3 댓글수 1 2024. 10. 11.
  • [Scaffold Design System] 3. 유연함을 갖춘 시맨틱 컬러 시스템 미리 알고 가면 좋은 개념원시 값(Raw value): #FF0000, rgb(255, 0, 0)와 같이 색상의 실제 값을 의미하며 가장 기본적인 색상 정의 방식입니다.시맨틱 컬러(Semantic color): 'text-primary', 'text-error'와 같이 색상의 용도나 의미에 따라 이름을 지은 토큰입니다. 용도에 따라 일관된 컬러를 사용하거나 접근성을 관리하기 위해 사용됩니다.스케일 컬러(Scale color): 'blue-100', 'gray-900'과 같이 색상을 일정한 단계로 나눠 지정한 토큰입니다. 일관된 색상 팔레트를 만들고 유지하는 데 사용됩니다.다양한 디자인 시스템의 컬러 체계 조사디자인 시스템을 만들 때 많이 참고하는 시스템은 주로 구글 머티리얼(Google Material).. 공감수 5 댓글수 1 2024. 10. 10.
  • [Scaffold Design System] 2. 여러 상황에 대응할 수 있는 텍스트 스타일 시스템 타이포그래피는 화면의 대부분을 구성하는 매우 중요한 요소로, 견고한 디자인 시스템을 위해 반드시 갖춰야 할 요소죠. 그러나 시스템 구축 초기 단계에서는 놓치기 쉬운 부분이기도 합니다. 피엑스디(pxd) 내부에서도 대규모 프로젝트를 진행하면서 텍스트 스타일 체계를 적용하는 과정에서 여러 어려움을 겪었습니다. 이러한 어려움을 어떻게 해결해 나갔는지 소개하겠습니다. 문제1. 확장성이 떨어지는 이름 규칙기존에는 Body 스타일의 이름을 지을 때 body 1, body 2와 같이 가장 큰 사이즈를 기준으로 내림차순으로 이름을 지었습니다. 프로젝트 초기에는 크게 문제가 없었지만, 운영을 하다 보면 꼭 아래와 같은 요청이 발생했습니다.큰 제목을 사용하게 되서, 더 큰 본문 텍스트가 필요해요. 18px정도면 좋을 것 .. 공감수 4 댓글수 0 2024. 10. 2.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.