Enjoy Life커리어를 시작하는 UI/UX 디자이너라면 알아둬야 할 필수 사이트 정리
close 나는 중소기업에서 첫 커리어를 시작했다. 당시에는 사수가 없어 ‘물경력이 되지 않을까’라는 불안이 컸고, 그 걱정이 오히려 나를 공부하게 만드는 동력이 되어 여러 디자인 아티클과 사이트를 찾아 읽으며 스스로 실무 감각을 익혔다.
물론 직장과 대학공부를 병행하여 디자인 경영을 접하며 이론적 토대를 쌓기도 했다. 그러나 무엇보다도 혼자 다양한 사이트를 탐방하며 공부한 시간이 지금의 실력을 만드는 데 큰 밑거름이 되었다고 생각한다.
그래서 이번 포스팅에서는 내가 공부하며 큰 도움을 받았던 사이트들, 그리고 평소 북마크해 두었던 사이트들을 정리해 공유하려 한다. 이 글이 커리어를 막 시작했거나 디자인을 준비하는 분들에게 실질적인 도움이 되기를 바란다.
검색방법
사이트 소개에 앞서 사이트를 잘 찾는 방법을 먼저 이야기하고자 한다. 이 글에서 소개하는 사이트들 보다 어쩌면 이 검색방법을 통해 더욱 좋은 사이트나 커뮤니티를 만나게 될 수 있다.
무조건 영어검색
대단한 검색 방법론은 아니다. 단순히 검색하고자 하는 주제를 단순히 영어로만 바꾸라는 것이다. 안타깝게도 대한민국은 IT선두국가가 아니다. 미국말고 IT 선두국가가 있기는 한가? IT분야에서 일하면서 VSCODE나, Adobe등 미국기업이 만든 프로그램들을 사용하지 않을 수 없다. 한국어로 정리한 2020년 Adobe완전 사용법에 관한 한국어 책보다. Adobe 커뮤니티나 유튜브, 공식 가이드문서를 통해 조회하는 것이 더욱 빠르게 새로운 기능들을 학습할 수 있는 방법이다.
또한 영어는 세계 공용어라는 점이 중요하다. 전 세계에서 사용하는 디자인 프로그램을 한국에서 만들었다 해도, 공식 문서는 반드시 영어로 제공되어야 한다.
w3techs.com 에 따르면 영어로 사이트가 구성된 비율이 49.2% 이고 한국은 0.8%라고 한다. 약 50배 정도의 차이가 나는 정보량이 있는 것이다. 이러한 이유로 한국의 특화된 사이트가 아닌 경우, 영어로된 검색을 추천한다.
영어 번역 확장프로그램
그렇다면 무조건 영어를 잘해야하나? 그럴 필요는 없다. 크롬 브라우저에 번역 확장 프로그램인 DeepL을 설치하면, 복잡한 절차 없이도 간단하게 영어 문서를 번역할 수 있다. 마우스로 원하는 문장을 드래그하면 바로 번역 버튼이 떠서 클릭만으로 결과를 확인할 수 있다. 이 기능을 활용하면 영어로 된 문서를 부담 없이 읽고 이해할 수 있으며, 글로벌 리소스에 한층 쉽게 다가갈 수 있다.
북마크 저장!
북마크 기능은 단순해 보이지만 실무에서는 강력하다. 처음에는 존재만 알고 실제로 사용하지 않았지만, 업무를 시작하면서 사이트들을 폴더별로 체계적으로 정리해두니 언제든 빠르게 접근할 수 있어 큰 도움이 되었다. 북마크는 단순히 사이트를 저장하는 기능을 넘어, 나만의 디지털 자료실이자 학습 저장소가 된다. 신입 디자이너라면 꼭 습관화하길 권한다.
그러면 본격적으로 UI/UX디자인 사이트들을 소개해보고자 한다.
이론적 토대를 쌓도록 도와주는 사이트 모음
어떤 업무든 바탕에는 철학이 있다. 프로젝트를 어떻게 대하고 어떤 직업정신을 가지고 있는지가 결과물의 퀄리티를 결정한다. 이론과 방법론을 통해 스스로를 점검하고 자신의 디자인 사고를 넓혀보자.
대표적인 디자인 시스템 (HCI)
가장 대표적인 IT 기업들의 디자인 시스템으로 Human Computer Interaction을 직관적으로 설명하는 대표적인 디자인 시스템 사이트들을 소개한다.
- 물론 기업마다 각각 다른 디자인 시스템을 보유하고 있고 모두 HCI라고 부를 수 있지만 직접적인 OS단의 가이드들을 HCI 가이드라고 소개한는 점 양해바란다.
- 휴먼 컴퓨터 인터렉션은 심리학, 인지과학, 산업디자인 등 다양한 파트의 교집합적 이론이며, 컴퓨터에서 벗어나 자율주행 로보틱스까지 포함하는 포괄적 학문이다.
- HIG(Human Interface Guide) : https://developer.apple.com/kr/design/human-interface-guidelines
애플에서 운영하는 인터페이스 가이드라인으로 최초의 인터페이스 가이드라인이라고 해도 과언이 아니다. 애플 플랫폼이 지향하는 디자인의 접근성, 사용성, 철학을 보여주며, 시스템 설계시 고려할 부분들을 알기 쉽게 설명해준다.
- Material Design Guid Line
구글에서 운영하는 인터페이스 가이드라인으로 구글이 지향하는 디자인에 대해서 쉽게 설명해주며, 여러 리소스들을 제공하며, 개인적으로 소개하는 3개의 가이드라인 중에 제일 친절한 UX/UI에 대한 설명을 제공해준다고 생각된다. 그리고 보다 더 공돌이 스러움이 담겨져있다(개인적인 취향이다).
- Microsoft Fluent Design System
마이크로소프트에서 운영하는 디자인 가이드라인으로 마이크로소프트가 지향하는 디자인을 담고 있다.
UX 가이드
- RightBrain LAB : https://blog.rightbrain.co.kr
RightBrain이라는 UX 컨설턴팅 회사에서 운영하는 블로그로 UX의 대한 전문적인 이야기를 중심으로 UI관련된 소소한 팁들도 공유해준다. 가끔 인사이트가 필요할 때 찾아본다.
- 뷰저블 포럼: https://forum.beusable.net/ko
GA4를 대체하고자 하는 웹사이트 데이터 분석 솔루션 뷰저블에서 운영하는 데이터 UX 포럼으로 데이터 분석으로
아티클 모음 사이트
업계 동향을 빠르게 파악하고, 전문적인 분석 글을 접할 수 있는 아티클 기반 사이트들이다. 단순히 뉴스를 모으는 수준을 넘어, 기획과 디자인 전반에 영감을 줄 수 있는 자료를 제공하므로 정기적으로 확인하면 학습 효과가 크다.
- surfit.io : https://www.surfit.io
서핏은 IT 업계의 근무하고 있다면 꼭 필수로 이용하는 서비스이다. 시작페이지로 설정하여 사용하는 것을 추천한다. IT 업계의 소식들을 전부 수집하여 피드형태로 보여준다. 서핏에서 전문적인 내용들을 보다보면 어느 새 부터 부터 자연스럽게 전문가가 될 수 있다.
- 요즘IT: https://yozm.wishket.com/magazine/
요즘 IT 또한 서핏과 같이 IT 업계의 내용들을 볼 수 있는 사이트이며 차이점이 있다면 작가고려를 지급하여서 보다 전문성있는 내용들을 다룬다는 것이 장점이라고 할 수 있다.
퇴근을 빨리 할 수 있도록 도와주는 실전 사이트
빠르게 디자인을 진행하기 위해서는 다양한 레퍼런스와 리소스가 필요하다. 숙련된 디자이너들은 필요한 자료를 적절히 찾아내는 능력을 통해 효율적으로 업무를 해결하지만, 신입 디자이너에게는 여전히 쉽지 않은 일이다. 이번에 소개하는 페이지들이 모두에게 야근 없는 디자이너 생활을 만드는 데 도움이 되기를 바란다.
무료 이미지 사이트
이미지는 사용자에게 강렬한 인상을 남기고, 내가 표현하고자 하는 감정이나 상황을 텍스트보다 더욱 직관적으로 표시해주는 시각적 언어이다. 직접 일러스트를 제작하는 것 보다 시간을 아낄 수 있다. 한정된 시간에 빠르게 디자인을 해야한다면 좋은 이미지는 도움이 될 것이다.
- unsplash.com : https://unsplash.com
unsplash.com은 디자이너라면 기본적으로 알아둬야 할 사이트라고 생각해도 손색이 없다. 대부분 고화질의 사진을 무료로 다운받아서 사용할 수 있다. 광범위한 주제에 대한 이미지를 제공한다. 최근에는 유료는 + 표시를 하면 unsplash+멤버쉽만 다운로드할 수 있는데, 무료 버전과, 유료버전의 이미지 퀄리티 차이가 많이나서, unsplash구독이 하고 싶어지기도 한다.
- shopify: https://www.shopify.com/stock-photos
shopify는 고화질 이미지를 얻을 수 있는 사이트이다. 화질이 깨지지 않는 이미지가 필요한 경우 shopify에서 다운로드 하여 사용하면 좋다. collection 별로 잘 정리되어 있어서 원하는 이미지를 빠르게 찾을 수 있다.
무료 아이콘 사이트
아이콘은 브랜드 아이덴티티를 표현할 수 있는 강력한 이미지 요소이기 때문에, 대부분 별도로 디자인하게 된다. 하지만 관리자 페이지나 대시보드처럼 시스템 기능을 설명하는 영역에서는 상황이 다르다. 수백, 수천 가지 아이콘이 필요할 수 있기 때문에, 이때는 아이콘 라이브러리를 활용하는 것이 효율적이다. 결국 상황에 따라 무료 아이콘을 활용해야 할 순간은 언제든 찾아올 수 있다.
- google material icons: https://fonts.google.com/icons?icon.query=file
구글에서 제공하는 material icons 으로 굵기 등 디자인 요소를 옵션으로 설정할 수 있고 웹에서 import 해서 작업하기 편하다. 개발자와의 커뮤니케이션이 한결 쉬워지는 아이콘 선택으로 UI/UX 디자이너라면 알고 있는 것이 좋다. 이렇듯 웹에서 import 해서 사용할 수 있는 아이콘 라이브러리 파일이 많이 운영되고 있다.
- react Icons: https://react-icons.github.io/react-icons/
React 에서 Icon을 쉽게 사용할 수 있도록 따로 구성해둔 사이트로 다양한 아이콘 라이브러리를 파악하고 직접 사이트에 들어가서 아이콘을 다운로드 하여 사용할 수 있다.
무료 폰트 사이트
폰트는 디자인의 분위기를 결정짓는 첫 번째 요소라고 해도 과언이 아니다. UI/UX 디자이너의 경우 한 번 폰트를 정하면 쉽게 바꾸지 않는 경향이 있지만, 그래픽 디자인이나 상세페이지 작업에서는 다양한 폰트 바리에이션을 활용하는 경우가 많다. 특히 무료로 제공되는 한국어 폰트를 잘 활용하면 디자인의 완성도를 한층 높일 수 있다.
- 눈누: https://noonnu.cc/#google_vignette
눈누는 오랜기간 한글 무료폰트를 스크랩하여 보여주는 웹사이트다, 한국에 dafont라고 이야기 할 수 있다. 무료한글폰트을 찾기위해서는 눈누 사이트에서 다양한 테마별로 원하는 한글 폰트를 찾을 수 있도록 제공해준다.
- 한글마을: https://www.koreafont.com/fonts/list/
한글마을도 한글폰트에 대해서 찾을 수 있는 사이트이지만 보통 눈누사이트와 겹치는 부분도 많다. 하지만 한글마을은 직접 손글씨를 작성하여 폰트를 만들 수 있는 기능을 제공한다. 아무리 찾아도 원하는 폰트가 나타지 않을 때 직접 폰트를 제작하여 디자인 할 수 있다.
- 나눔손글씨: https://clova.ai/handwriting/list.htmlhttps://clova.ai/handwriting/list.html
나눔손글씨 사이트는 손글씨 폰트만 100여종의 손글씨 폰트를 제공한다. 손글씨가 필요하다면 나눔손글씨 사이트에서 찾아보면 된다.
- dafont: https://www.dafont.com
다폰트(DaFont)는 다양한 종류의 영문 폰트를 다운받을 수 잇다. 다양한 글꼴과 분류로 이용하기 편리하다 다만, 모든 글꼴이 상업적 이용이 가능한 것은 아니며, 무료 다운로드가 가능하지만 상업적 이용 시에는 라이선스를 꼭 확인하고 경우에 따라 비용을 지불해야 한다.
무료 색상 사이트
좋은 색상을 선정하는 것을 도와줄 사이트를 소개한다.
- adobe color: https://color.adobe.com/ko/create/color-wheel
어도비에서 제공하는 색상 휠로 이미지에서 색상표 추출부터, 컬러휠, 트렌드 파악까지, 색상선택에 필요한 모든 기능을 제공하는 편리한 사이트이다.
- shutterstock/color: https://www.shutterstock.com/ko/colors
이미지 제공업체인 셔터스톡에서 제공하는 색상 사이트로, 색상이름을 중심으로 색상표를 제공하며 이미지를 업로드하여 색상표를 추출할 수 있다. 각 색상이름의 대한 설명과 특징도 제공해주니 색상에 대해서 공부하려면 천천히 정독해보는 것을 추천한다.
- htmlcolorcodes: https://htmlcolorcodes.com
HTML Color Codes는 Hex 코드 중심으로 색상표를 보여주어서 UI/UX 디자이너로써 개인적으로 애용하는 사이트이다.
- pantone sass: https://damonbauer.github.io/Pantone-Sass/
pantone의 색상표를 정리해둔 사이트로 참고해서 디자인 하면 좋다. 팬톤 색상표를 기반으로 Sass 변수화하여 개발 환경에서도 손쉽게 사용할 수 있다.
- schemecolor: https://www.schemecolor.com
직접 색상표를 만들 수 있는 사이트이며 완성된 팔레트를 다운로드해 바로 프로젝트에 적용할 수도 있다.
무료 일러스트 사이트
바쁠 때 사용할 수 있는 무료 일러스트 사이트를 소개한다.
- Freepick: https://www.freepik.com/illustrations#from_element=mainmenu
방대한 일러스트와 벡터 자료를 제공하며, 상업적 사용 시 라이선스를 확인해야 한다. 최근 AI 이미지 생성을 적극적으로 활용하고 있다.
- undraw: https://undraw.co/illustrations
컬러 커스터마이징이 가능한 심플한 스타일의 벡터 일러스트를 제공한다.
- clipartmax: https://www.clipartmax.com
다양한 Clip 이미지를 다운로드 할 수 있다. 개인적으로는 PPT 작업을 할 때 많이 사용하게 되는 사이트이다.
무료 목업 사이트
디자인의 퀄리티를 한 층 더 올려주는 목업을 이용해 디자인 결과물을 공개할 수 있다. 단순히 완성된 이미지를 보여주는 것보다, 실제 제품이나 화면 위에 적용한 형태로 시각화하면 훨씬 더 설득력이 생긴다.
- unblast: https://unblast.com/mockups/
- mockupworld: https://www.mockupworld.co
디자인적 영감을 받도록 도와주는 레퍼런스
최신 트렌드와 컨셉들을 파악할 수 있다. 특히 클라이언트와 미팅 시 예시 레퍼런스를 보여주는 것은 중요하다 클라이언트의 대부분은 자신이 무엇을 원하는 지 잘 모르는 경우가 많다. 레퍼런스를 통해 시각적 결과물을 제시하고, 방향을 잡는데 도움이 될 수 있다.
디자인 사이트
- webtong: https://webtong.kr
한국에 웹사이트 트렌드를 파악할 수 있는 사이트이다.
- wwit: https://wwit.design
한국에 모바일 어플리케이션을 모아둔 사이트이다.
- Behance: https://www.behance.net
Interaction 사이트/툴
- GSAP: https://gsap.com/showcase
다양한 웹 인터렉션으로 구성된 웹사이트를 볼 수 있는 GSAP Showcase 사이트이다. 트렌디한 웹사이트들을 볼 수있다.
- RIVE: https://rive.app
듀오링고에서 사용해서 주목받는 인터렉션 툴! RIVE로 게임 UI나 인터렉션이 많은 UI, 애니메이션을 제작할 수 있는 툴로, .riv 파일 확장자를 웹이나, 유니티, 플러터등 개발 환경에 렌더링 할 수 있어 편리하다.
디자인 에이전시
- gdweb: https://www.gdweb.co.kr/sub/agency.asp
gdweb에서 제공하는 에이전시 순위 국내 에이전시들의 디자인 프로젝트를 살펴보면서, 어떻게 프로젝트가 진행되는지 어떤 점들을 클라이언트에게 어필하고 있는지 파악 할 수 있다
디자인 시스템에 이해를 도와주는 사이트
- designsystems.surf: https://designsystems.surf/design-systems
UI/UX디자이너라면 디자인 시스템을 이해하는 것이 중요하다. 다양한 기업의 디자인 시스템을 스크랩하여 보여주며, 주요 이론적 개념들을 정리하여 제공한다.
이 글은 단순한 링크 모음이 아니라, 내가 직접 공부하며 얻은 방법과 리소스를 정리한 것이다. 혼자 공부하더라도 방향성을 잃지 않고 성장할 수 있다는 경험을 공유하고 싶었다. 신입이든, 준비 중이든, 이미 현업에 있는 사람이든 언제든 필요할 순간이 있을 것이다. 북마크에 정리하고 꾸준히 찾아본다면 이는 단순한 자료가 아니라 성장의 도구가 될 것이다. 이 글이 누군가에게는 ‘야근을 줄여주는 도구함’이자 ‘성장을 위한 나침반’이 되기를 바란다.