- 2,491정리한 사이트·도구
- 21도구 분류
- 12사이트 리뷰
- 3단분류 → 카테고리 → 세부 섹션
화면 미리보기
디자인서랍 — 디자이너 도구 2,491곳을 정리한 레퍼런스 아카이브 화면
한 일
6가지를 맡았습니다
이 프로젝트에서 직접 설계하고 만든 범위입니다.
- 01정보 구조 — 2,491개 데이터를 21개 분류·세부 섹션으로 체계화
- 02UI/UX 디자인 — 종이 질감 톤, 카테고리별 색, 카드·필터·사이드바 시스템
- 03퍼블리싱·개발 — 반응형, 검색·필터·북마크·로그인
- 04콘텐츠 기획·작성 — 인사이트 글, 사이트 리뷰, 모음집 가이드
- 05검색·AI 검색 구조 — 의미 있는 주소, 메타데이터, 요약 블록, RSS
- 06그래픽 — 리뷰 카드용 표지 그래픽 자체 제작
사용 기술
- 반응형 웹
- 통합 검색
- 요금 필터
- 북마크·로그인
- RSS
- 브레드크럼
주요 화면
화면과 기능으로 보는 핵심
실제 운영 화면에서 잘라 왔습니다. 무엇을 왜 그렇게 만들었는지 함께 적습니다.
2,491개를 21개 분류로 나눈 도구 디렉터리
분류 허브에서 시작해 카테고리, 세부 섹션으로 내려가는 3단 구조입니다. 이름으로도, '칼선', '평면도'처럼 하려는 작업으로도 찾을 수 있게 검색창을 맨 위에 뒀습니다.
- 분류별 개수 표기
- 작업 이름으로 검색
- 사이드바 빠른 이동
고르기 전에 확인하게 만드는 카테고리 상세
패키지 디자인처럼 한 분류 안에서도 갤러리, 업계 매체, 어워드, 칼선·목업 도구로 섹션을 나눴습니다. 무료·부분 무료·유료·출품비 별도 같은 요금 필터와 도메인 표기로 들어가 보기 전에 판단할 수 있습니다.
- 섹션 탭
- 요금 필터 10종
- 공식 도메인 표기
휴대폰에서도 같은 경험
사이드바는 햄버거 메뉴로, 카드는 한 줄로, 필터 탭은 가로로 밀게 바꿨습니다. 390px 화면 기준으로 누르는 영역과 글자 크기를 다시 잡았습니다.
- 카테고리 상세
- 메인
- 인사이트 글
- 04
검색과 AI가 읽기 좋은 글 구조
인사이트 글은 핵심 요약 상자, 목차, 비교 표로 시작합니다. 예를 들어 무료 폰트·아이콘 라이선스 글은 OFL·MIT·CC BY·CC0 차이를 표 하나로 정리했습니다.
- 핵심 요약
- 목차
- 비교 표
- 게시일 표기
- 05
정보를 믿게 만드는 장치
도구마다 공식 출처와 도메인을 드러내고, 리뷰에는 '사용하기 전에 확인하세요'와 확인 날짜를 둡니다. 틀린 정보는 바로 제안할 수 있도록 수정 제안 링크를 붙였습니다.
- 공식 출처
- 확인일
- 수정 제안
구조
이렇게 나눠 설계했습니다
검색하는 말과 찾는 순서에 맞춰 주소와 페이지를 나눈 방식입니다.
/tools/도구 디렉터리21분류분류 허브 → 카테고리(예: /tools/packaging/) → 세부 섹션. 요금 필터와 범위 검색
/insights/인사이트작업에 바로 쓰는 레퍼런스 활용법. 요약·목차·비교 표가 있는 글
/resources/사이트 리뷰12자체 제작 표지 그래픽과 '내 작업에 맞을까요?' 사이드 카드
/collections/모음집·가이드첫 랜딩페이지, 작은 도구 상자처럼 목적별로 묶은 리뷰 모음
과정
상황에서 결과까지
고객 상황, 문제, 접근 방법, 실행, 결과 순서로 적습니다.
- 1고객 상황
디자이너가 쓰는 도구와 레퍼런스 사이트는 영어 목록과 북마크에 흩어져 있었습니다. 링크는 많지만 무엇을 하는 곳인지, 무료인지, 언제 쓰면 좋은지는 직접 들어가 봐야 알 수 있었습니다.
- 2해결해야 했던 문제
정보가 2천 개를 넘으면 목록 자체가 짐이 됩니다. 많이 모으는 것보다 빨리 고르게 만드는 구조가 필요했고, 같은 내용이 검색과 AI 답변에서도 출처로 읽혀야 했습니다.
- 3목표와 접근 방법
데이터를 21개 분류와 세부 섹션으로 나누고, 목록마다 요금·도메인·한 줄 설명을 같은 자리에 붙였습니다. 깊이 있는 내용은 인사이트·리뷰·모음집 세 갈래로 따로 쓰고, 모든 페이지에 의미 있는 주소와 요약 블록을 넣었습니다.
실행 내용
- 데이터 정리 → 화면 설계 → 디자인 → 개발 → 검색 구조 순서로 진행
- 도구 디렉터리 허브·카테고리·세부 섹션 3단 구조와 요금 필터
- 통합 검색(단축키 /)과 카테고리 안 범위 검색
- 내 서랍(북마크)과 로그인, 공유
- 인사이트 글 템플릿(요약·목차·비교 표), 리뷰 표지 그래픽, 모음집
- 브레드크럼, RSS, 정보 확인일, 수정 제안 링크
실제 결과
2,491개 도구와 12개 사이트 리뷰, 인사이트 글을 갖춘 아카이브를 운영 중입니다. 방문자는 메인에서 분류·인사이트·리뷰·모음집으로 바로 갈라지고, 도구마다 요금과 공식 출처를 보고 고를 수 있습니다.
배운 것과 제안
비슷한 상황의 고객에게
이 프로젝트에서 확인한 것만 적습니다.
- 정보가 많을수록 '무엇을 뺄지'가 설계의 핵심입니다. 도구 카드에는 고를 때 필요한 세 가지(설명·요금·도메인)만 남겼습니다.
- 목록 페이지와 깊이 있는 글을 나누면 둘 다 좋아집니다. 목록은 빨라지고, 글은 검색과 AI가 인용하기 좋은 형태가 됩니다.
- 출처와 확인일을 보여 주는 것만으로 정보 사이트의 신뢰가 크게 달라집니다.
디자인서랍 — 디자이너 도구 2,491곳을 정리한 레퍼런스 아카이브 페이지를 끝까지 읽으셨습니다.
관련 콘텐츠
비슷한 상황이라면, 상담으로 먼저 이야기해 보세요.
지금 홈페이지 주소와 고민을 알려주시면 이 프로젝트와 비교해 무엇부터 할지 제안드립니다.
영업일 기준 1~2일 안에 답변드립니다.
