자료실

코드를 예쁜 스크린샷으로 만들어주는 도구입니다. 테마, 언어, 폰트를 선택하고 코드를 붙여넣으면 바로 이미지를 생성합니다. 블로그, 발표 자료, SNS에 코드를 공유할 때 사용하면 가독성이 확 올라갑니다.

디자이너가 아니어도 SNS 이미지, 발표 자료, 썸네일 등을 쉽게 만들 수 있는 온라인 디자인 도구입니다. 템플릿이 풍부하고, 드래그 앤 드롭으로 직관적입니다. 개발 블로그 커버 이미지 만들 때도 유용합니다.

브라우저에서 동작하는 UI 디자인 도구로, 실시간 협업이 가능합니다. 개발자도 디자인 파일에서 직접 CSS 값, 간격, 에셋을 추출할 수 있어서 디자이너-개발자 협업에 필수입니다. 무료 플랜으로도 개인 프로젝트는 충분합니다.

디자이너들이 공유한 색상 조합을 모아놓은 사이트입니다. 트렌디한 팔레트를 인기순/최신순으로 탐색할 수 있고, 클릭하면 hex 값이 복사됩니다. 프로젝트 시작할 때 컬러 스킴 정하기 어려우면 여기서 영감을 얻어보세요.

스페이스바만 누르면 조화로운 색상 팔레트가 랜덤 생성되는 도구입니다. 마음에 드는 색은 잠그고 나머지만 바꿀 수 있어서 원하는 조합을 찾기 쉽습니다. 디자인 감각이 부족한 개발자에게 특히 유용합니다.

웹사이트에 넣을 깔끔한 일러스트를 무료로 다운받을 수 있는 사이트입니다. 색상을 커스터마이즈할 수 있고, SVG/PNG로 받을 수 있습니다. 랜딩 페이지나 404 페이지에 일러스트가 필요할 때 자주 찾습니다.

Material Design, Font Awesome, Heroicons 등 200개 이상의 아이콘 세트를 하나의 프레임워크로 통합해서 쓸 수 있습니다. 필요한 아이콘만 로딩하니 번들 크기 부담도 없고, 모든 프레임워크를 지원합니다.

Feather Icons의 포크로, 더 활발하게 관리되고 아이콘 수도 많아진 프로젝트입니다. 일관된 디자인 스타일이 좋고, React/Vue/Svelte 패키지를 공식 지원합니다. shadcn/ui에서 기본 아이콘으로 채택하면서 인기가 많아졌습니다.

Tailwind CSS 제작팀이 만든 깔끔한 SVG 아이콘 세트입니다. Outline, Solid, Mini 세 가지 스타일을 제공하고, React/Vue 컴포넌트로 바로 쓸 수 있습니다. Tailwind 프로젝트에서 특히 잘 어울립니다.

가장 널리 쓰이는 아이콘 라이브러리 중 하나입니다. 무료 버전만으로도 2,000개 이상의 아이콘을 쓸 수 있고, CDN 한 줄이면 바로 적용됩니다. 브랜드 아이콘(GitHub, Twitter 등)이 포함된 점도 편리합니다.