UI9 Shadcn 게섯거라 Volt가 간다 제목은 살짝 어그로이고 평소 Shadcn 라이브러리를 사용했던 개발자라면 Volt라는 다른 UI 라이브러리가 생겼나 하고 의아해했을 것이다. 사실 Volt는 Vue에서 사용되는 유명한 UI 라이브러리인 Primevue의 shadcn 버전이라고 생각하면 된다. Primevue도 기존의 다른 UI 라이브러리처럼 커스텀이 비교적 귀찮고 어려운 구조로 되어있었다. 게다가 내가 직접 프로젝트에 적용해서 사용하던 시절에는 SCSS에서 TailwindCSS로 전환이 이뤄지는 큰 업데이트가 진행되던 시기라서 개고생을 했던 기억이 난다. 개고생을 했던 기억과는 별개로 UI 컴포넌트들의 퀄리티는 꽤 좋은 편이다. 디자인은 취향 차이가 있겠지만 굉장히 다영한 요소들을 지원하고 디자인, 편의성, 기능 등을 고려하면 Shadc.. 2025. 5. 5. 플랫 UI 디자인과 브랜딩 전략 초기 iOS의 skeuomorphism 이후에 최근 플랫 UI 디자인은 미니멀한 디자인이 대세가 되면서 시각적 설계의 기본처럼 자리를 잡아왔습니다. 플랫 UI 디자인이 가지는 장점은 용이한 시각적 위계 설계, 효율적인 디자인 리소스 생산 등으로 빠른 개발에 용이한 부분이 있습니다. 그런데 요즘같이 앱이 생활의 모든 분야에서 사용되면서 미니멀한 플랫 UI 디자인이 가지는 문제가 발생하는 거 같습니다. 바로 미니멀한 표현 방식 때문에 브랜드가 가지는 특징 및 방향성을 시각적으로 전달하는데 한계가 생깁니다. 로고 및 UI가 단순하다 보니 앱이나 서비스가 많이 없던 시절에는 괜찮았지만 요즘같이 앱이나 서비스가 범람하는 시점에서는 시각적인 요소가 거기서 거기인 느낌입니다. 쉽게 말해서 서비스가 눈에 띄지 않는 문.. 2024. 1. 30. UI 라이브러리와 디자인 시스템 요즘 UI 디자이너 채용 관련해서 JD를 보면 항상 빠지지 않는 단어가 "디자인 시스템"입니다. 저는 커리어 초기에 개발자분으로부터 디자인 시스템의 개념을 알게 되었고, 생산성을 위해 필수라는 생각을 가지고 프로젝트를 진행하면서 항상 전체 혹은 부분적으로 적용하였습니다. 먼저 디자인 시스템의 목적을 디자인, 개발 영역에 맞춰서 정리하겠습니다. 디자인에 있어서 디자인 시스템은 생산성 및 브랜딩에 있다고 생각합니다. 오늘의 주제가 UI 라이브러리 관련이라 간략하게 설명하자면, 피그마라는 툴의 등장으로 디자인 자체의 생산성이 크게 향상되었습니다. 피그마의 기능들이 디자인 시스템에 딱 맞을 정도로 설계가 되어있고, 비교적 최근에는 local variables의 추가로 동적인 디자인 변경 및 프로토타이핑도 가능해.. 2024. 1. 16. 컴포넌트 클로닝(8) - 쿠팡이츠 제가 유일하게 사용하는 음식 배달앱인데요. 배달 음식을 평소에 기피하고 가난해서인지 쿠폰 이벤트에만 주로 사용합니다.🤑 배달의 민족과 요기요도 예전에 사용했지만 쿠팡이츠를 사용하고 나서는 쭉 쿠팡이츠만 사용하는데요. 가장 큰 이유는 배달시간입니다. 쿠팡이츠는 아무리 길어도 30~40분 정도 걸린 거 같은데, 기존 배민이나 요기요 때는 주문마다 다르지만 길게는 1시간 30분까지도 걸린 적이 있어서인 거 같네요. 이런 부분에서 UX가 월등히 좋았지 않나 생각합니다.😁 포함되는 데이터로는 음식점 썸네일 음식점 이름 + 신규 음식점 여부 배달 예상 시간 평점 음식점 거리 배달비 쿠폰 여부 제가 배달시킬때 중점적으로 보는 게 평점보다는 거리인데요. 아무래도 멀리 있으면 미안하기도 하고 배달비의 압박 때문인 거 같.. 2021. 1. 4. 컴포넌트 클로닝(6) - 쿠팡 제품 리스트 www.coupang.com/ COUPANG 쿠팡은 로켓배송 www.coupang.com 약 2년 전부터 정착해서 쭉 사용 중인 쿠팡입니다. 쿠팡을 처음 봤을 땐 뭔가 국내 쇼핑몰보다는 아마존스럽다는 느낌을 많이 받았는데요. 리드 디자이너분이 구글 출신이었다는 이야기를 들었는데 정확하게 맞는지 모르겠네요😅 여튼 여러 가지 쇼핑몰을 쓰다 보면 가격 표시라던지 이미지 활용이라던지 판매하는 제품의 특성마다 다르겠지만, 시각적 위계가 가장 정석같이 정리된 게 쿠팡이라고 생각합니다. 쇼핑몰의 기본적인 레이아웃은 굉장히 오래전부터 연구 및 발전돼서 어느 정도 정석적인 부분이 있기 때문에 예술적(?)으로 변형을 주는 경우를 많이 보았는데요. 제 생각엔 시각적 위계의 기본은 갖추는 게 우선이라고 생각합니다😁 쿠팡에 가.. 2020. 12. 25. 컴포넌트 클로닝(5) - 유튜브 뮤직 컴포넌트 music.youtube.com/ YouTube Music | 음악 세상으로 통하는 문 YouTube Music에서 확인해 보세요. Android, iOS, 데스크톱용으로 공식 앨범, 싱글, 동영상, 리믹스, 라이브 공연이 담긴 새로운 음악 서비스를 여기에서 모두 만나보세요. music.youtube.com 저는 유튜브 프리미엄을 사용 중이라 자연스럽게 유튜브 뮤직을 사용하는데요. 유튜브와 연결되기 때문에 다양한 음악을 듣는 데는 좋은 거 같습니다. 몇 년 전 처음 나왔을 때는 쓰는 게 거의 불가능할 정도로 엉망이었는데 요즘은 굉장히 많이 나아진 서비스라고 생각합니다. 최근 블로그에 컴포넌트 클로닝 컨셉으로 글을 작성하다 보니 기존에 자연스럽게 쓰던 서비스도 몇 번씩이나 다시 분석하게 되었는데, 유튜브 .. 2020. 12. 9. 컴포넌트 클로닝(4) - 미디움 아티클 리스트 https://medium.com/ 이번에는 저만 알고 싶은 서비스인 Medium(이하 미디움)의 아티클 클로닝입니다. 미디움은 퀄리티 높은 블로그의 글을 모아서 큐레이션 해주는 서비스 인대요. 거의 대부분의 분야에 대해 최신 트렌드나 기술 동향을 파악할 수 있습니다. 영어라 좀 불편할 수도 있지만 저는 갤럭시탭을 사용하는데요. 구글 번역 앱을 깔아 두면 텍스트 선택 영역을 번역할 수 있는 기능을 사용할 수 있습니다. 아이폰에서 똑같이 시도했지만 아직은 되지 않네요. 아이폰에서도 얼른 번역이 가능하면 좋을 거 같습니다. 어쨌든 미디움 메인에는 아티클 목록이 있는데요. 깔끔, 단순하게 배치하고, 여백을 잘 사용한 화면 설계로 보입니다. 서비스의 대부분이 텍스트 위주라 심심해 보일 수 있는데 이미지를 영리하.. 2020. 12. 3. 컴포넌트 클로닝(3) - 핀터레스트 리스트 아이템 https://www.pinterest.co.kr/ 이번에는 레퍼런스나 참고할만한 화면 설계를 빠르게 찾아볼 때 사용하는 핀터레스트의 리스트 아이템을 클로닝 했습니다. 핀터레스트의 주요 사용자들은 이미지를 자신이 만든 보드(즐겨찾기)에 빠르게 정리하기 위해 사용하는데요. 그러기 위해 화면 설계가 잘되어 있다는 생각이 드네요. 저는 단순 참고만 하지 막상 이미지들을 정리하지는 않네요. 또 세로 비율의 형태를 가지고 있어서 모바일에도 거의 동일하게 적용하기에도 편하고 디자이너 관련된 사용자말고 다른 사용자가 많을까 싶은 서비스였는데 상장도 하고 주가도 많이 오르는 의외의 서비스라고 생각이 드네요. 생각보다 SNS 형태의 서비스라고 사용자들이 인식하는 거 같습니다. Target 이미지 전체가 컴포넌트 배경에 .. 2020. 12. 2. 컴포넌트 클로닝(2) - 레딧 쓰레드 첫 번째 컴포넌트 클로닝은 어설프게 html/css로 작업을 했지만 최근에 피그마가 엄청난 업데이트가 되어서 실제 화면 설계를 플렉스 박스를 활용하는 것과 거의 유사하게 작업이 가능하게 되었습니다. 그래서 효율적인 리서치 및 기록을 위해서 피그마를 활용하기로 하였습니다. 컨트롤 + 마우스휠로 줌인/아웃 가능합니다. 레딧이라는 해외 커뮤니티의 스레드 리스트를 타깃으로 클로닝 했습니다. elements icon - 카본 디자인 시스템의 아이콘을 사용했으며, 타깃과는 다르고 형태가 비슷한 걸 가져다 사용했습니다. badge - 뒤에 따라오는 텍스트는 들여 쓰기를 활용해 줄 바꿈 시 자연스럽게 나오게 하였습니다. meta-lnik - 링크된 URL의 메타 데이터를 표시하는 게 있어서 따로 엘리먼트로 작업했습니다.. 2020. 11. 25. 이전 1 다음
