필요한 디자인 레퍼런스를, 한곳에서.
기업과 대학의 공식 디자인 가이드를 모아 검색하고, 원문으로 연결하는 레퍼런스 아카이브 프로토타입.
- PROJECT
- 디자인그래피
- 참여한 일
- 개인 프로젝트 · 웹 프로토타입
- 작업
- 검색 · 분야별 목록 · 가이드 상세 화면
작업에 담은 생각.
왜 만들었나요?
레퍼런스를 찾을 때마다 여러 기업과 대학의 사이트를 일일이 방문해야 하는 불편함에서 시작했습니다. 공식 디자인 가이드를 한곳에서 검색하고 분류별로 살펴본 뒤 원문으로 이동할 수 있도록 만든 레퍼런스 아카이브입니다.
화면에서 확인할 수 있는 것
검색, 국내·해외와 기업·대학 분류, 가이드 목록과 상세 화면을 구성했습니다. 공식 자료를 만든 기관과 아카이브의 역할을 구분합니다.
서비스 소개와 브랜드 리소스
서비스 소개에서 제작 목적과 현재 제공하는 자료, 앞으로의 분야와 운영 원칙을 설명합니다. 브랜드 리소스 센터에는 기본·박스 로고와 공유 이미지, 컬러·서체·사용 안내를 모았습니다. 이곳의 대표 이미지도 해당 센터에서 제공하는 자료를 사용합니다.
현재 작업 범위
컬러 팔레트와 타이포그래피 메뉴는 준비 중이며, 아카이브 전체 자료의 정확성이나 서비스 운영 성과를 검증한 결과는 아닙니다.
개인 프로젝트 기록입니다. 공개 링크의 현재 서비스 상태는 달라질 수 있습니다.
화면으로 보는 작업
공개 사이트에서 확인할 수 있는 프로토타입입니다. 홈·소개·브랜드 리소스는 2026년 10월 26일 공개 화면이며, 나머지는 앞선 작업 기록입니다. 일부 메뉴와 상세 내용은 준비 중입니다.
01 / WEB
홈페이지
화면 해설
검색창, 국내·해외 기업과 대학의 분류, 대표 레퍼런스와 전체 목록 진입을 보여주는 첫 화면입니다.
구성 이유 · 해석
목적이 정해진 사용자는 검색으로, 아직 찾는 자료가 없는 사용자는 분류와 대표 자료로 시작할 수 있게 두 경로를 나눴습니다.
화면 목록으로 ↑
02 / WEB
디자인 가이드 전체 목록
화면 해설
지역·기관 필터, 결과 내 재검색, 자료 카드와 페이지 이동을 담은 목록입니다. 원본의 첫 페이지를 보여줍니다.
구성 이유 · 해석
필터와 자료를 좌우로 나눠 탐색 조건을 유지하면서 결과를 비교할 수 있는 구성입니다.
화면 목록으로 ↑
03 / WEB
국내 기업 디자인 가이드
화면 해설
홈에서 국내 기업을 선택했을 때의 목록입니다. 지역과 기관 유형의 선택 상태가 표시됩니다.
구성 이유 · 해석
전체 목록과 같은 레이아웃 안에서 선택 상태만 달라져, 분류를 바꿔도 탐색 방식이 이어집니다.
화면 목록으로 ↑
04 / WEB
해외 대학 디자인 가이드
화면 해설
해외 대학의 레퍼런스를 모은 필터 결과이며 자료 목록과 페이지 이동을 확인할 수 있습니다.
구성 이유 · 해석
기업과 대학을 같은 정보 구조로 다루되 분류를 분명히 보여줘 서로 다른 자료를 비교할 수 있도록 구성했습니다.
화면 목록으로 ↑
05 / WEB
검색 결과 · 블루
화면 해설
원본에서 블루를 검색했을 때 결과 수, 재검색 입력, 분류 필터와 토스 자료가 표시된 화면입니다.
구성 이유 · 해석
어떤 검색으로 나온 결과인지 제목에 남기고, 결과 안에서도 범위를 좁힐 수 있게 구성했습니다.
화면 목록으로 ↑
06 / WEB
검색 결과 없음
화면 해설
일치하는 자료가 없을 때 검색어 확인 안내, 필터 초기화와 홈으로 돌아가기 링크를 보여줍니다.
구성 이유 · 해석
빈 결과로 흐름이 끝나지 않게 다시 탐색할 수 있는 선택지를 제공합니다.
화면 목록으로 ↑
07 / WEB
토스 가이드 상세
화면 해설
태그, 가이드 요약, 컬러·타이포그래피·핵심 원칙과 원문 링크가 정리된 상세 화면입니다.
구성 이유 · 해석
자료를 읽는 화면과 공식 원문으로 이동하는 행동을 구분해, 아카이브와 자료 제공 기관의 역할을 나눴습니다.
화면 목록으로 ↑
08 / WEB
Google 가이드 상세
화면 해설
요약, 대표 컬러, 태그와 공식 원문 링크를 보여주며 심화 정리가 아직 되지 않았다고 명시한 화면입니다.
구성 이유 · 해석
상세 내용이 없는 상태를 채워 넣지 않고 안내로 구분해, 방문자가 원문에서 확인하도록 연결했습니다.
화면 목록으로 ↑
09 / WEB
서울대학교 가이드 상세
화면 해설
대학 자료의 요약, 태그·대표 컬러와 공식 원문 링크를 보여주는 상세 화면입니다.
구성 이유 · 해석
기업 자료와 동일한 상세 구조를 사용해 기관 유형이 달라도 정보를 찾는 위치가 일정합니다.
화면 목록으로 ↑
10 / WEB
서비스 소개
화면 해설
제작 목적, 기업·대학 자료의 분류, 앞으로 다룰 분야와 운영 원칙을 정리한 공개 사이트의 소개 화면입니다.
구성 이유 · 해석
현재 이용할 수 있는 디자인 가이드와 준비 중인 분야를 구분하고, 각 기관의 공식 원문으로 연결하는 아카이브의 역할을 설명합니다.
화면 목록으로 ↑
11 / WEB
브랜드 리소스 센터
화면 해설
기본·박스 로고와 공유 이미지, 로고·UI 컬러, 서체와 자산 사용 안내를 한곳에서 확인하는 화면입니다.
구성 이유 · 해석
서비스를 소개하는 사람이 공식 자산과 사용 기준을 함께 확인하도록 구성했습니다. 이 포트폴리오의 대표 이미지도 해당 페이지에서 제공하는 공유 이미지를 사용했습니다.
화면 목록으로 ↑
12 / WEB
컬러 팔레트 · 준비 중
화면 해설
컬러 팔레트는 아직 준비 중이라고 안내하고 사용 가능한 디자인 가이드로 연결합니다.
구성 이유 · 해석
완성되지 않은 메뉴의 현재 상태를 알리고, 대신 이용할 수 있는 경로를 남긴 구성입니다.
화면 목록으로 ↑
13 / WEB
타이포그래피 · 준비 중
화면 해설
타이포그래피 메뉴의 준비 중 상태와 디자인 가이드로 이동하는 링크를 보여줍니다.
구성 이유 · 해석
같은 준비 중 화면을 사용해 완료되지 않은 영역의 안내 방식도 일관되게 구성했습니다.
화면 목록으로 ↑