본문 바로가기

전체 글58

*공식* Figma Dev MCP 서버 사용해보기 몇 달 전에 서드 파티 Figma MCP 서버를 소개한 적이 있는데 최근 업데이트도 거의 되지 않고 방치된 상태였다. 방향성이 조금 다르지만 Figma Dev 모드에서 공식적으로 MCP 서버를 지원한다는 내용을 보고 직접 사용해 보았다. 아래 공식 매뉴얼에 있는 내용으로는 현재 베타이고 VS Code, Cursor, Windsurf, Claude Code에서 사용이 가능하다. 각자 사용하는 IDE에 맞춰서 설정을 해주면 된다. https://help.figma.com/hc/ko/articles/32132100833559-Dev-Mode-MCP-%EC%84%9C%EB%B2%84-%EC%95%88%EB%82%B4%EC%84%9C Dev Mode MCP 서버 안내서🚧 Dev Mode MCP 서버는 현재 오픈.. 2025. 6. 18.
디자이너의 두 번째 친구 Weavy 일단 첫 번째 친구는 Figma. 개인적으로 생성형 AI는 코딩, 리서치에서 적극 활용하였지 이미지, 비디오의 경우 테스트, 참고 자료 용도로만 사용을 했는데 이유는 디테일이 중요한 디자인에서 제어가 어렵고 불편하다는 점, 프롬프트 몇 번 돌리다 보면 차라리 직접 작업하는 게 나은 경우도 있다. 그러다가 광고로 접하고 써볼까 하다가 Weavy라는 프로덕트를 사용해 봤는 데 사용할수록 물건이라고 생각이 들었다. 솔직히 Figma를 처음 사용할 때의 느낌과 감정이 들었다. Artistic Intelligence Weavy 소개 페이지의 내용인데 일단 UI가 노드 형태이다. 노드는 워크플로우를 한 눈에 파악 및 수정하는데 용이하고, 반복되는 작업에서 사용성이 좋다. 도메인에 따라 인풋, 아웃풋의 타입에 대한 .. 2025. 6. 10.
Figma Make 베타 사용해보기 포트폴리오 작업으로 피그마를 만지작거리다가 Figma Make 베타가 활성화되었길래 후다닥 사용해 보았다.메뉴 구성 좌측에는 프롬프트 입력이 가능하고 입력칸 아래에 기능은 좌측부터 Paste a Figma Frame, Attach Design, Attach Image, Point and Edit 그리고 현재 AI 모델은 Claude Sonnet 4이다. 우측에는 결과물이 보이는데 상단 탭을 보면 프리뷰, 코드로 구분해서 보는 게 가능하다. 참고로 코드를 보니 Next, TailwindCSS, shadcn 기반으로 UI를 구성하는 거 같다. 먼저 화면 단위의 피그마 프레임을 붙여 넣어서 요청해 보았다. Paste a Figma Frame 프롬프트를 대충 작성하긴 했지만 프레임 내에서 위치, 크기 정보가 모.. 2025. 6. 4.
디자인 시스템을 위한 디자인 토큰 - 컬러 최근 피그마 Config 행사 이후로 기능이 많이 추가되면서 개인적인 회고 및 추가 기능을 파악하는 시간을 가져보았다. 그러다가 피그마 공식 유튜브에서 디자인 시스템의 컬러 관련 디자인 토큰 운영에 관한 영상을 보면서 상황이 된다면 시도해보고 싶은 방법이 있었다. 그래서 이번에는 디자이너가 속한 프로덕트 및 조직의 상황에 맞춰 적합한 컬러 관리 방법을 정리해보려고 한다. 1. 그냥 스타일이나 변수 지정 없이 Hex, HSL 코드로만 사용하기이건 절대 비추천이다. 혹여나 이렇게 하는 디자이너분이 계시다면 본인도 괴로울 것이고 개발자 분들은 분명히 괴롭다. 2. 컬러 목적 별로 스타일 및 변수 지정하기 개인적으로는 TailwindCSS 스타일을 선호하는데 주로 Surface, Primary 컬러를 변수로 지.. 2025. 5. 30.
Figma Config 2025 리뷰 Figma Config 행사 이후 국내외 유튜브에서 리뷰 영상이 많이 올라오고 있는데 대부분 신규 기능에 초점을 두고 있다. 신규 기능이라고 하지만 경쟁 제품 예를 들어 Webflow, Framer, Illustrator, Canva의 대체 버전 느낌이 강하다. 좀 더 혁신적이라고 할만한 건 피그마에 내장된 코드 에디터 같은 Figma Make인데 이건 퍼블리싱이나 프론트 개발을 병행하는 디자이너에게 혁신까지는 아니라고 생각한다. 피그마 디자인을 웹사이트로 퍼블리싱 가능한 Figma Site를 테스트한 결과 단순한 웹사이트 정도는 가능하지만 조금만 기능이 들어가거나 복잡해지면 상업적 용도로 사용하기에는 아직 많이 부족하다. 올해 연말로 예정된 CMS 기능이 추가되면 블로그나 간단한 회사 홈페이지 정도로 .. 2025. 5. 18.
Shadcn 게섯거라 Volt가 간다 제목은 살짝 어그로이고 평소 Shadcn 라이브러리를 사용했던 개발자라면 Volt라는 다른 UI 라이브러리가 생겼나 하고 의아해했을 것이다. 사실 Volt는 Vue에서 사용되는 유명한 UI 라이브러리인 Primevue의 shadcn 버전이라고 생각하면 된다. Primevue도 기존의 다른 UI 라이브러리처럼 커스텀이 비교적 귀찮고 어려운 구조로 되어있었다. 게다가 내가 직접 프로젝트에 적용해서 사용하던 시절에는 SCSS에서 TailwindCSS로 전환이 이뤄지는 큰 업데이트가 진행되던 시기라서 개고생을 했던 기억이 난다. 개고생을 했던 기억과는 별개로 UI 컴포넌트들의 퀄리티는 꽤 좋은 편이다. 디자인은 취향 차이가 있겠지만 굉장히 다영한 요소들을 지원하고 디자인, 편의성, 기능 등을 고려하면 Shadc.. 2025. 5. 5.
OO.ai 사용기 어떤 경로로 알게 되었는지 기억이 나지는 않는데 최근 OO.ai라는 서비스를 알게 되었다. 첫인상은 구글이 떠올랐는데 처음엔 국내 서비스가 아니라고 생각했지만 알고 보니 오픈리서치라는 회사의 프로덕트였다  첫인상AI 검색이라고 되어있지만 UI가 전통적인 검색 엔진의 형태를 띄고 있길래 처음엔 단어로 검색을 해보았다. 검색 시에 시간이 카운트가 되고 3.7초가 걸렸다는 안내를 보고 처음에는 "왜 이렇게 느리지?"라는 생각이 들었다. 구글 같은 검색 엔진에서는 거의 0.5초 이내로 결과를 보여주는데 곧바로 OO.ai 에서 보여주는 결과를 보고 어느 정도 납득하게 되었다  전통적인 검색 엔진의 경우 사용자는 [검색] -> [결과 탐색] -> [자신에게 필요한 정보 습득] 이라는 과정을 거치는데 OO.ai 에서.. 2025. 3. 29.
폰트사이즈 em, rem 단위의 유래는 뭘까? 오늘도 채용 공고에 올라온 여러 서비스를 개발자 도구로 보다가 오랜만에 px가 아닌 rem으로 작성된 서비스가 보였다. TailwindCSS로 작성되었다면 기본적으로 rem 단위를 사용하지만 해당 서비스는 SCSS로 작성되어 있어서 눈에 들어왔던 거 같다. 어쨌든 rem이 root em인건 알고 있는데 막상 em의 유래가 무엇인지는 몰랐다 바로 claude에게 물어봤는데 em이 emphasize의 약자라는 것이다. 그럴듯하지만 강조하다라는 의미와 폰트사이즈가 무슨 상관일까?라는 생각이 들어 계속 캐물으니 계속 답변이 달라졌는데 할루시네이션이 확실했다. 그래서 꾸역꾸역 구글에서 em, rem 관련 검색을 이어갔는데 대부분 em, rem의 작동 원리에 대해서만 알려주는 글이 많았다. 혹시나 해서 위키피디아를.. 2025. 3. 25.
앱 리뷰, 파이썬, AI 최근 데스크 리서치를 진행하다가 경쟁사 분석을 위해 앱 리뷰를 수집하게 되었다. 가장 먼저 Claude를 통해 어떤 방식이 가장 효과적인지 질문을 하였고, 대략적인 예제 코드를 작성해 주는데 익숙한 코드가 아니었다. 웹 개발에 관심이 많아 JS는 눈에 익숙했지만 파이썬 코드는 영 눈에 들어오지 않았다. 그래도 Claude가 작성한 코드가 복잡해 보이지 않았고 파이썬에는 앱 리뷰를 가져오는 라이브러리가 있다는 정보를 파악하였다 직접 파이썬 파일을 생성하고 코드를 집어넣고 실행을 하는데 결과는 그럴듯하게 나왔다. 하지만 파이썬을 주로 다루지 않다보니 CLI를 통해 수정하고 실행하는 절차가 번거로웠으며 그렇다고 코드 에디터를 사용하는 것도 거추장스럽게 느껴졌다. 그래서 Claude에게 클라우드 환경에서 파이썬.. 2025. 3. 24.
Figma MCP로 디자인 해보기 최근 개발자 사이에서 MCP가 핫한 주제라서 조금 알아보다가 Figma MCP를 활용해서 디자인을 생성하는 걸 테스트해 보았다. MCP를 간단하게 설명하면 Model Context Protocol의 약자로 AI 모델이 다른 어플리케이션과 상호작용하는데 필요한 개념이라고 생각하면 된다. 평소에도 디자인을 AI를 활용해 코드로 변경하는건 자주 사용하였고 퀄리티도 완벽은 아니지만 조금의 수정을 거치면 실무에서도 사용이 가능한 정도로 결과가 나오게 된다. 하지만 이번에 해본 것은 디자인을 코드로 변경하는 게 아니라 디자인을 토대로 프롬프트를 작성하면 Figma MCP를 통해 AI가 디자인 작업을 수행하는 테스트를 해보았다. https://github.com/sonnylazuardi/cursor-talk-to-f.. 2025. 3. 22.
AI 시대 투두앱의 최강자 - Todoist 개인적으로 평소에는 마이크로소프트의 To do(이하 마소 투두)를 사용했는데 가장 큰 이유는 심플함 하나만 보고 사용하였다. 그런데 최근 n8n을 활용해 아래와 같은 플로우를 설계해 보았다 1. 사용자가 투두앱에서 태스크를 생성2. 일정 간격으로 생성된 태스크를 필터링3. 필터링된 태스크의 제목을 기반한 프롬프트로 AI 모델을 활용4. 태스크 수행에 필요한 정보를 태스크 설명에 업데이트 기존에 사용하던 마소 투두에서도 정상적으로 작동을 하였지만 가장 큰 문제는 AI 모델을 통해 얻은 결과물이 마크다운 기반이었다. 당연히 마크다운 형식을 지원할 거라 생각했지만 텍스트들이 엉망으로 작성되어 설명이 없는 게 더 나은 상황이었다. 어떻게든 고쳐보려다가 마소 투두가 가진 한계라고 생각을 했고, 다른 투두앱을 검색.. 2025. 3. 11.
Highcharts 사용기 최근 차트를 그려야 하는 경우가 많이 생겨 피그마 차트 플러그인을 포함해서 리서치를 진행했는데 맘에 드는 차트 관련 프로덕트가 없었다. 그러던 중 Highcharts라는 차트 라이브러리를 발견하였고 가격에 놀랐지만 AI와 병행해서 사용하면 꽤 괜찮은 결과물을 무료로 얻을 수 있었다 Highcharts: 웹 시각화의 강력한 도구Highcharts는 JavaScript 기반의 인터랙티브 차트 라이브러리로, 웹 개발에서 가장 널리 사용되는 시각화 도구 중 하나다. 다양한 차트 유형과 높은 커스터마이징 가능성을 제공하며 다음과 같은 특징이 있다다양한 차트 타입 - 라인, 바, 파이, 스캐터 플롯 등 40개 이상의 차트 타입 지원브라우저 호환성 - 모든 주요 브라우저에서 일관된 렌더링 제공반응형 디자인 - 다양한.. 2025. 3. 7.
RGB vs HSL vs OKLCH 최근 업데이트된 테일윈드 V4에 OKLCH 방식이 적용되면서 기존에 사용되던 RGB, HSL과 비교하면서 리서치를 해보았다. 웹 개발자든 디자이너든 이 세 가지 색상 모델의 차이점을 이해하면 더 효율적이고 일관된 디자인 시스템을 구축할 수 있을 것이다RGB: 디지털 세계의 기본 색상 모델RGB는 Red, Green, Blue의 약자로, 디지털 디스플레이에서 가장 기본적으로 사용되는 색상 모델이며 각 채널은 0부터 255까지의 값을 가지고, 이 세 가지 색상의 조합으로 다양한 색상을 표현한다직관적인 숫자 표현 - rgb(255, 0, 0)은 빨간색, rgb(0, 255, 0)은 초록색을 의미웹 브라우저 호환성 - 모든 브라우저에서 완벽하게 지원헥스 코드(#RRGGBB) - 웹 개발에서 널리 사용되는 간결한.. 2025. 2. 28.
Webflow 사용기 부트캠프 과정 중에 기획한 서비스를 랜딩 페이지를 직접 퍼블리싱해 보는 과정이 있었다. 수강생 대부분이 노베이스라서 노코드툴인 Webflow(이하 웹플로우)가 가장 적당한 것 같았다. 예전에 해외에서 잘 나가는 서비스 중에서 사용하는 CSS 라이브러리를 조사한 경험이 있는데 많은 수의 랜딩 페이지를 Framer 혹은 웹플로우로 작업했던 게 기억이 났다. 대략적인 비율이 Framer, 웹플로우, Tailwind, 바닐라 CSS가 각각 1/4 비율이었던 거 같다 계정을 만들고 사이트를 작업하는 공간을 보면 왠만한 기능은 제공하는 편이다엘리먼트 추가 - 다양한 HTML 요소들페이지 관리 - 생성한 페이지 목록이며, 기본적으로 에러 및 404 페이지를 제공한다컴포넌트 - 컴포넌트를 생성해서 CMS의 데이터를 기.. 2025. 2. 25.
OpenRouter 사용기 최근 부트캠프 강의를 통해 강사님이 잠깐 언급을 하신 OpenRouter를 직접 결제하고 사용해 보았다. 간단하게 설명하면 OpenRouter는 다양한 AI 모델을 하나의 API로 통합해서 사용하게 해주는 서비스이다. 주로 메이저 한 AI 모델을 다루다 보니 특정한 혹은 마이너 한 모델은 허깅 페이스에서 찾아봐야 할거 같다. 후기주요 장점 및 특징은 통합 인터페이스, 과금 체계, 다양한 모델 선택 및 비교가 있는데, 실제 사용할때는 하나의 채팅창에서 복수의 모델을 선택하고 프롬프트를 작성하면 동시에 모델이 작동하게 된다. 거기서 결과값, 토큰, 소요 시간 등을 볼 수 있는데, 하나하나 직접 비교를 해야 하는 부분에서 사용성이 좋다는 생각이 들지는 않았다. 정확한 비용은 사용 내역에서 테이블 형태로 조회가.. 2025. 2. 14.
Clarity 사용기 PM 부트캠프를 진행하면서 강의를 통해 hotjar를 알게 되었고 개인 프로젝트에 적용해 보고 사용해 보았다. hotjar의 기능과 사용성이 꽤 좋다고 생각이 들었는데 지인이 Clarity도 사용해 보라고 추천하셔서 곧바로 스크립트를 적용하고 사용해 보았다. 가격가장 놀라운 것은 가격이었다. hotjar의 경우 가격이 꽤 있었는데, Clarity는 완전히 무료였다. 물론 기능이나 사용성에서 hotjar가 더 우위에 있기는 했지만, 무료인 Clarity는 부담 없이 적용하는 게 가장 큰 장점이라고 생각한다. 레코딩레코딩을 통해 사용자가 어떻게 인터랙션을 했는지 파악이 가능하다. 클릭수나 페이지 이동을 통해 유저를 세그먼트로 분리도 가능하며, 타게팅해서 분석이 가능하다고 생각한다. 단점은 미묘하게 hotja.. 2025. 2. 7.
API와 사용성 개인 프로젝트를 개선하는 과정에서 가장 신경 쓰였던 부분은 웹 브라우저의 위치 정보 권한 요청이었다. 모바일 앱과 달리 웹 브라우저에서는 위치 정보 권한을 지속적으로 요청하게 되는데, 이는 사용자 경험을 저해하는 요소였다. 당시에는 이를 대체할 만한 해결책을 찾지 못했었다. 그러던 중 Cursor를 사용하면서 우연히 알게 된 API를 통해 위치 정보 권한 요청을 대체할 수 있었고, 이를 통해 서비스의 사용성을 크게 개선할 수 있었다.IP기반 API네이버 지도를 사용하던 중 문득 GPS가 없는 데스크톱 환경에서는 어떻게 위치 정보를 획득하는지 궁금증이 생겼다. 현재 위치 찾기 기능을 테스트해 보니 정확한 위치가 아닌 대략적인 위치만 표시되었는데, 이는 IP 주소를 기반으로 위치를 추정하는 방식이었다. Cu.. 2025. 1. 21.
디자이너의 Cursor 사용기 AI 관련 툴을 사용한 지 2년 가까이 지난 거 같다. 처음에는 미드저니로 시작해서 ChatGPT, Claude 등등 디자인 분야에서도 Figma가 최근 AI 관련 기능을 도입했지만 프로그래밍 분야보다는 대체되는 속도가 느리다고 생각한다. 일단 Figma에서 생성하는 디자인은 실제로는 써먹기 힘들고 생성해도 수작업으로 수정을 많이 거쳐야지 쓸모가 있어진다. 오히려 수정하는데 시간과 노력이 더 많이 들어가는 경우도 있다. 이런 생각을 가지고 기존에 작업했던 프로젝트에서 수정할 일이 생겨서 이번엔 Cursor를 사용해서 작업해 보기로 하였다.가입 및 설치가입하고 요금을 결제하려고 했는데 처음 사용자의 경우 2주 동안 무료이고 정해진 크레딧이 있다. 프리미엄 모델의 경우 500회, 나머지는 무제한이지만 프리미.. 2025. 1. 20.
TailwindCSS 얼마나 많이 쓸까? 개인 프로젝트의 경우 무조건 TailwindCSS를 사용해서(심지어 앱 개발을 경험하면서도 NativeWind라는 라이브러리를 사용했다) 디자인 토큰 및 레이아웃 설정, 퍼블리싱을 진행하는데 디자이너 입장에서 원활한 수정은 크나큰 무기가 된다. 더욱이 퍼블리싱도 직접 하다 보니 피그마와 실제 브라우저에서 느껴지는 이질감 개선이나 반응형 디자인 적용도 빠르게 가능하다. 다크 모드는 비교적 순식간에 적용이 가능하다. 그런데 국내 대부분의 서비스에서는 TailwindCSS를 보기가 힘든게 사실이다. 모든 서비스를 체크해보지는 못했지만 최근 구직하면서 JD를 체크하는 회사의 서비스는 대부분 TailwindCSS를 사용하지 않는다. 그래서 일단 Product Hunt의 최근 월간 랭킹을 기준으로 상위 50개 웹 .. 2025. 1. 17.
피그마 플러그인 개발 후기 러닝 커뮤니티에서 글을 보다가 마라톤 페이스 차트를 프린트해서 사용한다는 글을 보았다. 대부분의 러너들은 스포츠 워치의 GPS 기능을 활용해 페이스를 체크하지만 경우에 따라 GPS 정확도에 문제가 생기기 때문에 보조 수단으로 페이스 차트를 활용하는 경우가 있다. 해외 메이저 마라톤 대회에서는 자체적으로 페이스 차트를 제작해서 배포하는 경우도 있다. 가능하면 웹에서 페이스 차트를 설정하고 인쇄까지 바로 하면 좋겠지만 피그마 사용이 가능한 사람이라면 생성된 페이스 차트의 크기 및 스타일 수정도 피그마에서 가능하기 때문에 범용성이 좋은 피그마 플러그인으로 한번 만들어 보기로 결정했다.기획 및 디자인기능이 단순하기 때문에 필요한 인풋 정도만 아래와 같이 정리했다평균 페이스대회 타입(하프, 풀)구간별 페이스(옵션.. 2025. 1. 15.
Scroll Frames 라이브러리 사용기 Scroll Frames - 라이브러리 링크 개인 포트폴리오 사이트를 준비하면서 개인적인 강점인 모션그래픽 역량을 강조하기 위한 방법을 찾으려고 했다. 단순히 동영상을 올리기보다는 인터랙티브하게 동작하는 방법을 찾다가 Scroll Frames라는 라이브러리를 발견했다. 라이브러리 문서를 보면서 느낀 특징은 모션그래픽, CSS, JS에 대한 이해도를 동시에 요구했으며, 쉽게 사용이 가능한 라이브러리는 아니라고 생각이 들었다.라이브러리 컨셉일단 요구하는 동영상 포맷은 일반적은 동영상 파일이 아니라 이미지 시퀀스이다. 이미지 시퀀스는 하나의 동영상 파일이 아닌 정지 영상 즉 png 혹은 webp 같은 이미지 파일의 묶음이라고 생각하면 된다. webp의 파일 크기가 작아 효율적이기 때문에 애프터 이펙트에서 pn.. 2025. 1. 11.
번다운 차트와 번업 차트: 프로젝트 관리의 두 얼굴 최근에 전직장 동료분이 제품의 CS 관련 데이터 및 추이를 보여주는 대시보드의 디자인을 요청하셨는데 간단하게 UI 템플릿, 구글 스프레드시트와 스크립트로 실제 사용이 가능하게 작업해서 전달했다. 처음엔 번다운 차트로 데이터를 보여주려다가 CS 발생 시기 및 빈도도 중요한 데이터이기 때문에 리서치를 진행하다가 번다운 차트가 아닌 번업 차트가 더 적합하다고 판단했다. 아래는 번다운, 번업 차트의 특징과 차이점을 정리해 보았다.번다운 차트번다운 차트는 정해진 기간 혹은 작업량을 가진 프로젝트나 스프린트의 남은 작업량을 시간에 따라 보여주는 차트다. 마치 카운트다운처럼, 시간이 지나면서 남은 작업량이 줄어드는 걸 시각적으로 표현한다.명확한 목표 시각화 - 스프린트 시작점에서 모든 작업량이 정해져 있어서, 남은 .. 2025. 1. 10.
C4D 피지컬 렌더러 세팅 최근 3D 모션그래픽을 많이 사용하려는 분위기가 있는데 3D 기반 특히 모션그래픽은 CPU 기반이든 GPU 기반이든 컴퓨팅 파워가 많이 필요한 작업이다. 영상을 전문으로 제작하는 프로덕션에서는 렌더팜을 자체 구축하든 아웃소싱을 하는 방향이 있을텐데 소프트웨어 개발 업체에서는 렌더팜이나 아웃소싱을 이용할 만큼 필요성이나 우선도가 높지는 않다. 그래서 인하우스로 작업하기에 효율적인 CPU 기반의 피지컬 렌더러 세팅을 정리하려고 한다. 아무래도 GPU 기반의 렌더러는 하드웨어 구축 비용이 많이 필요하기 때문에 범용성이 적다고 생각한다.피지컬 렌더러 세팅 정리PhysicalSampling Quality - MediumSubsurface Scattering Subdivision - 4Global Illuminat.. 2025. 1. 9.
애용하는 피그마 플러그인 피그마 초기 플러그인이 도입되던 당시, 게시되는 플러그인을 대부분 사용해보고 나만의 생산성 도구로 많이 활용했었다. 이 당시에는 피그마 자체의 기능 지원이 현재보다는 부실했고, 프로젝트에서 플러그인 의존도가 높았었다.의존성 문제플러그인 의존성이 높아지면서 레이어 명세부터 퍼포먼스 이슈까지 다양한 문제가 발생했다. 단순 작업물에서는 문제가 없었지만, 피그마 프로젝트의 생산성 및 편의성 측면에서는 점점 좋아지지 않는다고 판단했다. 대표적인 예로는 Googlesheet Sync가 있다. 이는 구글 스프레드 시트에 텍스트 문구를 작성하고 플러그인을 통해 페칭하는 용도로, 컴포넌트에 사용되는 문구 및 다국어화 처리에 도움이 되었다. 그러나 프로젝트의 사이즈가 커지면서 퍼포먼스 문제를 일으켰고, 버그 및 서버 문제.. 2025. 1. 7.
TailwindCSS 스타일 컬러 팔레트 디자인 시스템이 유행하기 전부터 디자인 토큰, 즉 컬러 팔레트와 타이포그래피 정리는 기본 중의 기본이지만, 가끔 다른 디자이너의 디자인 시스템을 보게 되는 경우가 있다. 그때 Surface, Primary 컬러를 각각 3~5개 정도로만 정리하는 경우를 많이 보았다. 보기에는 심플하고 충분해 보이겠지만, 실무에서 최소 퍼블리싱이나 UI를 구현해본 경험이 있다면 현실과 괴리가 있다는 느낌을 받을 것이다. 특히 다크 모드를 고려하는 프로덕트라면 더욱 그렇다. 프로덕트의 구조적 특징에 따라 다르겠지만, 시각적 구분이 명확해야 하는 경우, 예를 들어 대시보드 형태의 화면 구성이 필요하다면 Surface 컬러 3~5개로는 너무 부족한 것이 사실이다.TailwindCSS의 인기최근 TailwindCSS의 인기가 많다.. 2025. 1. 6.
로티랩(Lottielab)사용기 로티랩을 찾게 된 계기는 기존에 Lottie 파일 제작을 애프터 이펙트에 의존했는데, 간단한 벡터 애니메이션을 만드는데 오버스펙 및 번거로움이 컸기 때문이다. 처음에 사용해본 LottieFiles는 간단한 벡터 애니메이션 제작도 어려울 정도로 사용성 부분에서 최악이었다. 하지만 로티랩 계정을 만들고 원하던 애니메이션을 제작하고 JSON 파일로 뽑아내는 데는 5분도 걸리지 않았고, 피그마를 처음 사용할 때의 기분과 비슷했다. 빠르고 효과적이고 심플했다.벡터 애니메이션의 기본기로티랩에서 제공하는 벡터 관련 기능은 기본 도형, 펜, 텍스트(폰트가 다양하지는 않음), Skew, 패스 기반 애니메이션 등 기본기는 갖추고 있다. 애니메이션 모드에서 키를 잡는 것도 너무 심플한 게 단점이긴 한데, 한두 번 사용해보면.. 2025. 1. 5.
플랫 UI 디자인과 브랜딩 전략 초기 iOS의 skeuomorphism 이후에 최근 플랫 UI 디자인은 미니멀한 디자인이 대세가 되면서 시각적 설계의 기본처럼 자리를 잡아왔습니다. 플랫 UI 디자인이 가지는 장점은 용이한 시각적 위계 설계, 효율적인 디자인 리소스 생산 등으로 빠른 개발에 용이한 부분이 있습니다. 그런데 요즘같이 앱이 생활의 모든 분야에서 사용되면서 미니멀한 플랫 UI 디자인이 가지는 문제가 발생하는 거 같습니다. 바로 미니멀한 표현 방식 때문에 브랜드가 가지는 특징 및 방향성을 시각적으로 전달하는데 한계가 생깁니다. 로고 및 UI가 단순하다 보니 앱이나 서비스가 많이 없던 시절에는 괜찮았지만 요즘같이 앱이나 서비스가 범람하는 시점에서는 시각적인 요소가 거기서 거기인 느낌입니다. 쉽게 말해서 서비스가 눈에 띄지 않는 문.. 2024. 1. 30.
UI 라이브러리와 디자인 시스템 요즘 UI 디자이너 채용 관련해서 JD를 보면 항상 빠지지 않는 단어가 "디자인 시스템"입니다. 저는 커리어 초기에 개발자분으로부터 디자인 시스템의 개념을 알게 되었고, 생산성을 위해 필수라는 생각을 가지고 프로젝트를 진행하면서 항상 전체 혹은 부분적으로 적용하였습니다. 먼저 디자인 시스템의 목적을 디자인, 개발 영역에 맞춰서 정리하겠습니다. 디자인에 있어서 디자인 시스템은 생산성 및 브랜딩에 있다고 생각합니다. 오늘의 주제가 UI 라이브러리 관련이라 간략하게 설명하자면, 피그마라는 툴의 등장으로 디자인 자체의 생산성이 크게 향상되었습니다. 피그마의 기능들이 디자인 시스템에 딱 맞을 정도로 설계가 되어있고, 비교적 최근에는 local variables의 추가로 동적인 디자인 변경 및 프로토타이핑도 가능해.. 2024. 1. 16.
AI 시대 그리고 UI/UX 디자이너의 미래 피그마 업데이트 혹은 로드맵을 꾸준히 챙겨보시는 분은 아시겠지만 피그마가 생성형 AI 기능 추가를 예고해 놓은 상황입니다. 피그마는 대부분의 UI/UX 디자이너 혹은 디자이너와 협업하는 직군에서 생산성에 주안점을 두시는 분들도 많이 사용하는 툴입니다. 그렇기 때문에 AI 기능 추가로 인한 파급력이 있을 거라 예상됩니다. 그럼 각 UX 하위 파트에 미치는 영향 및 UI/UX 디자이너는 어떻게 대처해야 하는가에 대한 주제로 작성해 보겠습니다. 1. Interaction 생산자 입장에서는 인터랙션 부분인 유저 인터페이스가 가장 크게 영향받는 부분이라고 생각합니다. 피그마의 생성형 AI 기능의 성능이 어느 정도인지는 모르겠지만 프롬프트를 잘 다루고 기획적인 역량이 받쳐주는 사람이 사용한다면 극단적인 경우 UI .. 2024. 1. 7.
유저 경험의 종류 UX 디자이너가 아니라면 UX에 대한 오해를 가지는 경우가 많은데 위의 동영상을 통해 어느 정도 해소가 가능할 거 같아서 저의 견해를 정리할 겸 글을 작성합니다. 일단 영상의 제목은 Types of User Pain Points인데, 글의 제목은 유저 경험의 종류라서 매칭이 되지않을수 있습니다. 하지만 페인 포인트를 특정 영역에서 해소한다는 점에서 반대로 생각하면 유저 경험의 종류로도 생각할 수도 있을 거 같습니다. 영상에서는 크게 3가지로 분류를 하는데 아래와 같습니다. Interaction Level - 상호작용 Journey Level - 여정 Relationship Level - 관계 상호작용은 말그대로 서비스와 사용자가 상호작용하는 단계이며, 전체 경험의 단계에서 초입에 해당합니다. 보통은 애플.. 2022. 10. 1.

티스토리툴바