브랜드 요소 한눈에 보기
사람이 판단하는 배움
Sapere는 사람이 질문하고, 이해하고, 사용하고, 스스로 판단하도록 돕습니다. 모든 화면은 사용자가 얻는 이해와 다음 행동을 설명할 수 있어야 합니다.
AI should not replace human thought. It should empower it.학습 흐름
여섯 가지 판단 기준
- 01이해를 먼저 돕습니다
필요한 용어 설명과 예시
처음 읽는 사람이 뜻을 알 수 있는가?
- 02다음 행동을 보여줍니다
과제·버튼·오류에 구체적인 행동
읽은 뒤 무엇을 하면 되는가?
- 03선택권을 존중합니다
다시 읽기·힌트·재시도
재촉하거나 부끄럽게 만들지 않는가?
- 04사실과 상태를 구분합니다
실측·예시·미확인·완료의 실제 상태
제공하지 않는 성과나 기능을 약속하지 않는가?
- 05읽는 공간을 지킵니다
중립 본문과 목적 있는 시각 자료
장식이 이해와 과제를 방해하지 않는가?
- 06같은 규칙을 반복합니다
공통 토큰·컴포넌트·용어·자산
기존 규칙으로 해결할 수 있는가?
Sapere aude는 호라티우스의 《서간시》 1.2.40에 등장하고, 칸트는 1784년 계몽에 관한 글에서 이를 표어로 사용했습니다. Sapere 소개에서 철학의 배경 읽기
이해가 빛으로 퍼지는 순간
정식 로고는 둥근 광휘 심볼과 Sapere 워드마크로 구성됩니다. 중심에서 퍼지는 빛은 Sapere aude, 곧 자신의 이성을 사용하는 용기를 나타냅니다.
정식 로고 v2.0 · 둥근 외곽과 중앙의 빛 · 원본 비율 940:1024
- 중심의 빛
- 스스로 이해하고 판단하는 순간입니다. 중앙의 네 갈래 빛은 투명한 구멍이 아닌 반대 색의 도형입니다.
- 둥근 광휘
- 질문하고 배우면서 이해가 넓어지는 모습입니다. 갈래 수에는 별도의 의미를 두지 않습니다.
- 면으로 된 형태
- 가는 선 대신 면을 사용해 작은 크기에서도 형태가 유지됩니다.
구조와 보호 여백
- 비율과 방향
- 원본 940:1024 · 정사각형 배치 영역 S × S · 회전 없음
- 보호 여백
- 사방 x = 0.5S 이상 · 기본 로고도 같은 기준
- 기본 로고 조합
- 심볼과 글자 간격 0.16S · 대문자 높이 0.72S · Noto Sans KR 700, 자간 −0.02em
- 최소 크기
- 심볼 24px·인쇄 6mm · 기본 로고 26px·인쇄 8mm
- 파비콘
- 16·32px 슬롯은 전용 파비콘 사용 · 크게 확대하지 않음
사용 규칙
내려받은 파일을 그대로 사용하세요. 사진 위에서는 로고 뒤에 단색 면을 확보합니다. Academy는 서비스 구분 문구이며 로고 안에 넣지 않습니다. 파일 제공은 후원·제휴·인증을 뜻하지 않습니다.
표기
- 로고·일반 브랜드명
- Sapere
- 학습 영역
- Sapere Academy
- 독립 슬로건
- Sapere Aude
- 영문 뜻
- Dare to know.
- 한국어 브랜드 아이디어
- 알고자 하는 용기
- URL·파일 식별자
- sapere
독립 슬로건과 한국어 브랜드 아이디어에는 끝 마침표를 붙이지 않습니다.
흰색, 잉크, Electric blue
읽는 영역은 중립 면을 유지하고, 파랑은 행동·링크·초점·강조에 사용합니다. 핵심 색 띠의 폭은 화면에서 쓰는 비율입니다. 색을 선택하면 HEX 값을 복사합니다.
핵심 색
블루
중립
상태
큰 제목, 분명한 간격
본문과 UI는 Noto Sans KR을 사용합니다. 역할별 크기와 줄 간격은 tokens.css를 따릅니다.
- Display
--font-display · 48px · 1.25질문하고, 이해하고, 판단합니다 - Heading
--font-heading · 32px · 1.25질문하고, 이해하고, 판단합니다 - Subheading
--font-subheading · 24px · 1.25질문하고, 이해하고, 판단합니다 - Reading
--font-reading · 18px · 1.75질문하고, 이해하고, 판단합니다 - UI
--font-ui · 16px · 1.5질문하고, 이해하고, 판단합니다 - Caption
--font-caption · 14px · 1.5질문하고, 이해하고, 판단합니다
알고자 하는 용기, Sapere Aude
Noto Sans KR · 700 · 48px
한국어 줄바꿈
모르는 것을 질문하고, 이해하고, 직접 사용하고, 결국 스스로 판단할 수 있게 되는 것이 우리가 생각하는 배움입니다.
사이트 전역에서 word-break: keep-all과 text-wrap: pretty를 사용합니다. 한글 단어를 가능한 한 통째로 다음 줄로 넘깁니다.
블루 그라데이션과 그레인
히어로와 대체 썸네일 모두 글자 없는 매쉬 그라디언트에 미세한 필름 그레인을 더합니다. 이미지마다 블루 계열의 색 조합만 바꾸고, 제목이 올라가는 히어로는 진한 색을 사용합니다.
Mesh · Deep히어로·브랜드 소개 · 왼쪽 제목 영역은 진한 블루 
Mesh · Electric업데이트 소식 · 브랜드 대체 이미지 
Mesh · SkyAcademy·기초 · 브랜드 대체 이미지 
Mesh · Lavender요청·참여 · 브랜드 대체 이미지 
Mesh · Navy검증 · 브랜드 대체 이미지
이미지의 역할
- 브랜드 그래픽히어로·캠페인·대체 썸네일
분위기와 시리즈
- 사진뉴스·행사·참여자 이야기
해당 내용의 실제 장면
- 설명 도식개념·절차·검증 방법
관계와 순서를 이해하도록 구성
- 작업 화면수업·활용법·기능 소개
해당 작업과 결과
- 데이터 시각화LLM·벤치마크·집계
원자료·단위·조건·날짜
- 참여자의 결과물활용 사례·학습 이야기
실제 작업·과정·공개 가능 범위
긴 읽기 본문과 입력 영역은 중립 배경을 유지합니다. UI 아이콘은 Lucide, 데이터 차트는 Apache ECharts를 사용합니다.
목적이 있는 움직임
움직임은 문장 강조·관계 설명·상태 피드백에 사용합니다. 움직임 줄이기에서도 같은 정보와 기능을 제공합니다.
- 의미를 드러냅니다
관계·진행·변화·행동 결과를 설명합니다.
- 즉시 반응합니다
조작 결과를 지연시키지 않습니다.
- 읽기를 지킵니다
불필요한 반복을 넣지 않습니다.
- 선택권을 보장합니다
움직임 줄이기와 필요한 재생 제어를 제공합니다.
짧은 UI 전환
버튼·탭·메뉴의 상태 변화는 150ms 또는 200ms를 기준으로 합니다.
- 즉시
0ms - Fast
--motion-fast - Normal
--motion-normal
문장 강조와 움직임 줄이기
움직임을 줄여도 같은 문장을 처음부터 모두 읽을 수 있습니다.
질문하고, 이해하고, 사용하고, 판단합니다.
분명하고 차분한 안내자
쉬운 말과 자연스러운 동사로 말합니다. 설명은 합니다·입니다체, 지시는 하세요체입니다.
더 많은 답을 얻는 것을 넘어, 스스로 이해하고 판단할 수 있도록.
목적 · 철학과 제공하는 도움
표현 바꾸기
- 작은 불씨가, 당신의 가능성이 되도록.AI를 이해하고, 내 일에 활용하세요.
- 첫 배움은, 작고 구체적으로.기초 수업
- 이제, 직접 해볼까요?실습
- 잠깐, 이해를 확인해요.이해 확인
- 아직 맞는 배움을 찾지 못했어요.검색 결과가 없습니다.
은유와 감정적인 권유 대신 실제로 할 행동을 씁니다.
브랜드 자산 내려받기
정식 로고 v2.0과 현행 브랜드 그래픽입니다. SVG에는 글자 윤곽이 포함되어 있습니다. PNG는 투명 배경이며, 전체 묶음에는 검정·흰색 원본과과 보호 여백 포함 파일이 들어 있습니다.
- 검정 심볼 원본Vector_black.svg사용자 제공 원본 · 940×1024 SVG
- 흰색 심볼 원본Vector_white.svg사용자 제공 원본 · 940×1024 SVG
- 로고 전체 묶음sapere-logo-v2.zipSVG·PNG · 검정·흰색 · 사용자 원본 포함
- 심볼 SVGsapere-symbol-ink.svg원본 940:1024 · 검정 외곽·흰 중앙
- 기본 로고 SVGsapere-logo-ink.svg심볼 + Sapere · 글자 윤곽 포함
- 보호 여백 포함 SVGsapere-symbol-clearspace-ink.svg사방 0.5S 여백 · 투명 배경
- 심볼 PNGsapere-symbol-ink.png1024×1024px · 투명 배경
- 흰색 심볼 SVGsapere-symbol-white.svg어두운 배경용 · 흰 외곽·검정 중앙
- 브랜드 서명sapere-signature.svg기본 로고 + Sapere Aude + Dare to know.
- 파비콘sapere-icon.svg광휘 심볼 · 전용 여백 · 64×64 SVG
- 히어로 그래픽sapere-mesh-hero.webp매쉬 그라디언트 캡처 · 3840×2160 WEBP
브랜드 사용이나 자료 제작에 대해 문의하려면 함께하기 페이지를 확인하세요.
함께하기