ISANG EDU ARCHIVE · DESIGN LANGUAGE
좋은 강의를 발견하고,
나의 일에 필요한 배움으로 이어지도록.
아는 것이 늘어나는 순간에서,
일하는 방식이 달라지는 순간까지.
이상에듀 아카이브는 직장인의 배움을 일의 흐름에 연결합니다. 자신 있게 안내하되 과장하지 않고, 필요한 정보를 먼저 보여줍니다. 화면의 주인공은 브랜드 장식보다 강의와 학습자입니다.
이상에듀한 편의 발견PRIMARY SIGNATURE겹쳐진 세 장의 책장은
차곡차곡 쌓이는 배움과
그다음 단계로의 성장을 담습니다.
썸네일, 강의명, 난이도와 시간을 함께 보여줍니다. 탐색에 필요한 정보부터 정리합니다.
주요 행동과 선택 상태에만 파랑을 씁니다. 중립적인 바탕이 콘텐츠의 색을 살립니다.
큰 약속보다 배우게 될 내용을 말합니다. 짧은 문장과 익숙한 언어로 다음 행동을 안내합니다.
“반복 업무를 줄이는 첫 번째 자동화를 만들어 보세요.”
학습자가 할 수 있게 되는 일을 구체적으로 표현합니다.흰 바탕 위에, 필요한 만큼의 파랑.
브랜드 컬러가 모든 영역을 채우지 않습니다. 흰색과 중립색으로 정보의 질서를 만들고, 파랑으로 선택과 행동을 안내합니다.
--blue주요 행동 · 선택 상태
--blue-dark호버 · 강조 문구
--blue-light선택 영역의 배경
--ink제목 · 기본 본문
--muted보조 문구 · 메타 정보
--border구획 · 구분선
--surface중립 배경 · 입력 영역
본문은 Ink를 기본으로 사용합니다. 홈의 보조 문구에는 #687383을 사용합니다. 이 문서의 설명문은 별도 #636B77로 표시합니다. 색만으로 상태를 전달하지 않고 문구와 형태를 함께 사용합니다.
한글과 영문의 균형이 편안한 글꼴. 크기와 굵기의 차이를 분명하게 두고, 본문은 넉넉한 행간으로 읽기 쉽게 구성합니다.
내일의 일을 바꾸는 배움
지금, 가장 필요한 AI 클래스
일 잘하는 사람의 ChatGPT: 매일 쓰는 AI 업무 습관
나의 일에 맞는 강의를 찾고, 작은 실습으로 시작해 보세요.
배운 내용을 오늘의 업무에 하나씩 연결할 수 있습니다.
입문 · 18개 강의 · 총 3시간 24분
홈 데스크톱 기준 · 사용 범위: wght 45–930 · 기본 자간 −0.25px · 제목 자간 −0.5~−1.2px · 줄바꿈은 문장과 의미 단위를 기준으로 합니다.
작은 입체감으로, 분야를 알아보기 쉽게.
카테고리마다 다른 사물과 색을 사용합니다. 부드러운 명암과 측면, 가까운 그림자로 입체감을 더하되 과한 광택은 줄였습니다.
all.svg
ai.svg
automation.svg
data.svg
design.svg
business.svg
leadership.svg
communication.svg
growth.svglogo.svg모든 아이콘은 자체 작성한 SVG입니다. 비율을 유지하고, 컬러 배경이나 테두리 상자 없이 사용합니다. 검색·이동 같은 기능 아이콘은 단색 선으로 표현해 콘텐츠 탐색 아이콘과 구분합니다.
운영 데스크, 회원, 콘텐츠, 보고서를 서로 다른 사물로 구분합니다. 흰색 사이드바에서는 32px, 업무 선택 화면에서는 50px로 사용합니다.
admin-operations.svg
admin-members.svg
admin-company.svg
admin-content.svg
admin-studio.svg
admin-curation.svg
admin-learning.svg
admin-live.svg
admin-quality.svg
admin-report.svg
admin-support.svg
admin-settings.svg명확한 역할, 일관된 정보 순서.
같은 행동은 같은 형태로 안내합니다. 강의 카드에는 탐색에 필요한 정보를 담고, 버튼과 배지의 강조 수준은 역할에 맞게 조절합니다.
주요 버튼 최소 높이 41px · 모서리 4px · 핵심 행동은 채운 파랑, 보조 행동은 중립 테두리로 구분합니다.
김지윤 · 입문
서지훈 · 입문
카드 전체를 박스로 둘러싸지 않습니다. 이미지와 정보의 간격, 얇은 구분만으로 충분히 읽히게 만듭니다.
규칙적인 정렬 안에서, 콘텐츠는 풍부하게.
데스크톱에서는 넓게 탐색하고, 모바일에서는 자연스럽게 이어 봅니다. 제목·썸네일·메타 정보의 순서는 화면이 작아져도 유지합니다.
홈의 바깥 여백은 1,180px 초과에서 40px, 768–1,180px에서 24px, 767px 이하에서 18px입니다. 이 디자인 시스템 문서는 읽기 편한 별도 최대 너비 1,120px를 사용합니다.
키보드 포커스는 명확하게, 터치 영역은 충분하게. 움직임은 짧게 사용하고, prefers-reduced-motion 설정을 존중합니다.
화면의 모양보다, 해야 할 일을 먼저.
학습자는 이어볼 강의와 진도를, 운영자는 다음 처리할 건과 판단 근거를 먼저 봅니다. 숫자는 가로 요약으로 묶고, 작업은 표와 목록으로 펼칩니다.
공통 학습자 헤더 73+46px · 본문 최대 1,280px · 운영 콘솔 탐색 226px. 모바일에서 표는 영역 안에서 스크롤되고 학습 도구는 탭으로 전환됩니다. 체험 상태와 실제 기록을 문구로 구분합니다.