썸네일의 대표 색상을 이용해 동적으로 배경 그라디언트 만드는 방법 (color-thief.js)

썸네일의 대표 색상을 이용해 동적으로 배경 그라디언트 만드는 방법 (color-thief.js)

최근 음악이나 OTT처럼 컨텐츠를 제공하는 앱에서는 썸네일(이미지)에 따라 배경색이나 배경 그라데이션이 변경되는 디자인을 쉽게 볼 수 있습니다.썸네일(대표 이미지)에 따라 배경색이 자동으로 달라지는 UI는 일반적으로 "동적 색상(Dynamic Color)" 또는 "다이내믹 컬러(Dynamic Color)" UI라고 부릅니다. 구글의 Material Design 3 디자인 시스템에서 이 개념이 널리 알려졌으며, 사용자의 배경화면이나 콘텐츠(예: 썸네일 이미지)에서 주요 색상을 추출해 앱 전체의 UI 색상 테마에 반영하는 방식을 의미합니다. 이 기능은 다음과 같은 원리로 구현할 수 있습니다. color-thief나 Vibrant.js 같은 라이브러리를 사용해서 썸네일의 대표 색상을 추출추출한 색상을 바탕으..

  • topic JS
  • · 2025. 4. 17.
  • textsms
무선 기계식 키보드, 로지텍 MX Mechanical Mini 사용기

무선 기계식 키보드, 로지텍 MX Mechanical Mini 사용기

키보드는 개인 취향에 따라 선호도가 확실히 구분되는 아이템인 것 같습니다. 이전에 마우스 후기에도 이야기했지만 일종의 직업병으로 손가락 관절에 통증을 느끼고 있습니다. 그로 인해 키압이 너무 높거나, 키 높이가 너무 낮아서 기판에 닿는 충격이 그대로 전해지는 키보드를 선호하지 않습니다. 로지텍 MX Mechanical Mini를 사용할 기회가 있었지만 제가 선호하는 키보드가 아니라는 결론을 내리게 되었습니다. 어떤 점에서 만족스럽고, 불만족스러웠는지 후기를 남겨보려 합니다. 제품 개요와 디자인MX Mechanical Mini는 로지텍 MX 시리즈의 첫 기계식 키보드로, 텐키리스 75% 레이아웃(84키)을 채택하고 있습니다. 텐키(우측의 숫자키)의 유무는 키보드 선택에 중요한 포인트입니다. 텐키리스의 경우..

  • topic 제품리뷰
  • · 2025. 4. 16.
  • textsms
UX 디자이너의 아이템: 로지텍 MX Anywhere 3S 사용후기

UX 디자이너의 아이템: 로지텍 MX Anywhere 3S 사용후기

UX디자이너로 일하면서 얻을 수 있는 직업병이 있습니다. 손가락 관절 통증, 손목터널증후군, 거북목과 같은 것이 그 예이지요.(ㅎㅎ) 저는 오랫동안 손가락 관절 통증을 겪고 있습니다. 클릭할 때마다 오른손 검지손가락의 통증이 있어 장기간 와콤의 태블릿을 마우스 대용으로 사용하기도 했습니다. 그마저도 손가락이 아파서 장비를 변경하려던 중, 로지텍 MX Anywhere 3S를 선택하게 되었습니다. 로지텍 MX Anywhere 3S는 콤팩트한 크기와 강력한 성능, 그리고 다양한 기능을 갖춘 프리미엄 휴대용 무선 마우스입니다. 실제로 한 달 이상 사용해 보며 느낀 점과 장단점을 솔직하게 정리해 보겠습니다. 디자인과 휴대성MX Anywhere 3S의 첫인상은 ‘작다곤 했는데 진짜 작다’ 였습니다. 무게는 약 9..

  • topic 제품리뷰
  • · 2025. 4. 16.
  • textsms
스타트업에서 사수 없이 UX 디자이너로 성장하기

스타트업에서 사수 없이 UX 디자이너로 성장하기

공지사항에 있는 'flexbox, 그는 누구인가!' 글에서도 언급했듯이, 저는 작은 IT 회사에서 15년 넘게 근무하고 있으며 현재는 UX개발실장으로 일하고 있습니다. 저희 회사는 스타트업은 아니지만, 제가 입사할 당시만 해도 설립된 지 얼마 되지 않은 젊은 기업이었고, 규모도 지금처럼 크지 않았습니다. (사실 지금도 규모가 아주 크진 않습니다.ㅎㅎ) 저 역시 구직활동을 할 때 '사수'가 있는지를 중요하게 생각해서, 선배 디자이너가 있는 회사를 선택했습니다. 그런데 막상 입사해 보니, 그 선배가 사수로서의 역할을 제대로 해주지 않았습니다. 당시에는 답답하고 화가 나고 원망스럽기도 했지만, 지금 돌이켜보면 그 선배들 역시 사수로서 어떤 역할을 해야 하는지 잘 모르는 주니어 디자이너였던 것 같습니다. 저의 ..

  • topic 업무 Tip
  • · 2025. 4. 16.
  • textsms
상업적으로 사용할 수 있는 무료 한글폰트 추천

상업적으로 사용할 수 있는 무료 한글폰트 추천

디자인, 마케팅, 영상, 웹사이트, 인쇄 등 다양한 상업적 프로젝트에서 한글 폰트의 선택은 브랜드 이미지와 가독성에 큰 영향을 미칩니다. 하지만 저작권 문제로 인해 폰트 선택에 신중을 기해야 하죠. 다행히도, 상업적으로 자유롭게 사용할 수 있는 고품질 무료 한글 폰트들이 많이 공개되어 있습니다. 상업적 무료 한글폰트 추천 TOP 101. 나눔스퀘어/나눔고딕/나눔바른고딕네이버에서 배포하는 대표적인 무료 폰트로, 가독성이 뛰어나고 다양한 굵기가 제공되어 본문, 제목 등 어디에나 잘 어울립니다. 상업적 이용이 자유롭습니다.https://hangeul.naver.com/font 네이버 글꼴 모음네이버가 만든 150여종의 글꼴을 한번에 만나보세요hangeul.naver.com2. 본고딕(Noto Sans KR)구..

  • topic 폰트
  • · 2025. 4. 15.
  • textsms
Figma 디자인 시스템 추천(무료 다운로드)

Figma 디자인 시스템 추천(무료 다운로드)

디자인 시스템은 일관성 있는 UI/UX를 빠르게 구축하고, 협업 효율을 높여주는 필수 도구입니다. Figma는 전 세계 디자이너들이 만든 다양한 무료 디자인 시스템을 커뮤니티를 통해 제공하고 있습니다. Figma 디자인 시스템은 실무에 바로 적용할 수도 있지만, 본인이 참여하고 있는 프로젝트의 디자인 시스템을 만들기 위한 레퍼런스로 활용이 가능합니다. 추천하는 디자인 시스템 Figma 파일1. Untitled UI세계에서 가장 큰 디자인 시스템으로, 900개 이상의 스타일과 변수, 1만 개가 넘는 컴포넌트와 다양한 variants, 420개 이상의 예제 페이지, 2,000개 이상의 아이콘을 포함하고 있습니다. 모든 디자인을 확인하려면 유료로 구매해야 하지만, 일부는 무료 버전으로도 공개되어 있습니다.무..

  • topic UX 디자인
  • · 2025. 4. 15.
  • textsms