Codeit (코드잇)

보라색 두 포인터 도식 옆에 코드 실행과 채점 결과를 붙이고, GURU 힌트로 다음 풀이를 이어가는 학습 화면

한국개발 도구소비자차가운modern-minimalhumanism고딕compactsoftsubtle라이트다크공식한글 지원출시 2025개정 2026

갤러리에서 열기 — 적용 예시 · 가이드 다운로드

Brand DNA

브랜드 DNA

브랜드명: 코드잇(Codeit).
한 줄 정체성: 설명을 읽고 직접 코드를 실행한 다음, 채점과 힌트로 이해를 확인하는 온라인 학습 서비스.
공식 디자인 철학: “배움의 기쁨을 세상 모두에게”. 공개 디자인 시스템은 일관된 경험과 팀 사이의 공통 기준을 강조한다.
시그니처 요소 1개: 무채색 학습 작업면에 보라색 실행·진도 표시를 놓고, 문제 도식 → 코드 → 결과 → GURU 힌트로 이어지는 짧은 학습 고리를 만든다.
이 문서의 범위: 공식 색·서체·간격·반경·아이콘 규격과 실제 학습 IDE 관찰을 묶었다. 화면은 학습 서비스를 재구성한 예시이며 문제 내용·진도·학습 기록은 가상이다. 2025년 GURU 업데이트 기사와 2026년 현재 문서를 확인했으나 시스템 첫 공개·대규모 개편 연혁은 확인되지 않아 앞머리의 두 연도는 관찰 자료를 기준으로 둔 추정이다. 실제 출시·개편 연도로 인용하지 않는다.
테마: LightMode/DarkMode 공식 시멘틱 표와 학습 환경 설정의 라이트·다크 선택을 확인했다. 이 파일의 기본 본문은 라이트 모드다. 마케팅 사이트의 검은 구획을 다크 지원 근거로 삼지 않는다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 명료한 · 친근한 · 몰입하는.
무드 설명: 문제의 조건, 코드의 위치, 채점 결과를 가는 경계선으로 분리한다. 보라색은 다음 행동과 선택 상태를 찾게 해 주고, 짧은 한국어 문장은 학습자가 다시 시도하도록 돕는다. 도식은 친근하게, 실행 결과는 고정폭 숫자로 또렷하게 보여 준다.
비주얼 스타일: 모던 미니멀 + 휴머니즘. 입체감은 문제 설명 그림에 모으고 학습 도구에는 얕은 면과 선을 쓴다.
밀도(Density): Compact. 학습 중에는 설명·코드·실행 결과·도우미가 한 화면에 있어야 한다. 마케팅 홈의 넓은 여백과 구분한다.
모서리 성향: Soft — 조작 요소 8px를 기본으로, 독립 상자 16px와 넓은 상자 20px를 구분한다. 선택 탭과 XP 배지만 원형 반경을 쓴다.
평면성: Subtle. 패널은 경계선으로 나누고 그림자 단계는 팝업의 위계에만 제한한다.

Color System

컬러 시스템 (CSS 변수)

브랜드 Codeit Violet #6500C3과 제품 팔레트 Purple90 #6500C2는 공개 자료에 서로 다르게 적혀 있다. 하나로 바꾸지 않는다. 아래 primary 50~900은 공식 Purple00~100 가운데 대표 단계를 고른 문서용 별칭이다. 공식 토큰 이름을 그대로 옮긴 것이 아니다.

기본 배경: 라이트 #FFFFFF, 다크 #181B28 — 공식 대응 gray00.
보조 / 세 번째 배경: 라이트 #FBFBFB / #F6F6F8, 다크 #1E212D / #242735 — 공식 대응 gray05 / gray10.
기본 글자: 라이트 #333236, 다크 #F7F7F8 — 공식 대응 gray100.
보조 / 캡션 / 비활성 글자: 라이트는 gray100의 80% / 50% / 30%, 다크도 같은 비율 — 공식 대응 txt-secondary / caption / disabled.
보라 본문: 라이트 #760DDE, 다크 #CD96F8 — 공식 대응 purple80 / purple20.
보조 보라 본문: 라이트 #9933FF, 다크 #C47CFD — 공식 대응 purple60 / purple30.
기본 경계선: 라이트·다크 모두 gray100의 20% — 공식 대응 border-secondary.
옅은 경계선: 라이트·다크 모두 gray100의 10% — 공식 대응 border-tertiary.
긍정 / 부정: 라이트 #07AC30 / #D6173A, 다크 #68EC75 / #D6173A — 공식 대응 status-positive / negative.

:root {
  --brand-violet:#6500C3; /* 공식 브랜드 색 */
  --color-primary-50:#FBF5FF; /* Purple00 */
  --color-primary-100:#F8ECFF; /* Purple05 */
  --color-primary-200:#E9CCFF; /* Purple10 */
  --color-primary-300:#CD96F8; /* Purple20 */
  --color-primary-400:#B363FD; /* Purple40 */
  --color-primary-500:#9933FF; /* Purple60 · 실제 홈 CTA 관찰 */
  --color-primary-600:#8F00FF; /* Purple70 */
  --color-primary-700:#760DDE; /* Purple80 */
  --color-primary-800:#6500C2; /* Purple90 · 브랜드 색과 구분 */
  --color-primary-900:#54009E; /* Purple100 */
  --color-secondary-500:#1790FF; /* Blue50 · 설명 그림 보조 */
  --color-neutral-0:#FFFFFF; --color-neutral-50:#FBFBFB;
  --color-neutral-100:#F6F6F8; --color-neutral-200:#EDEDF0;
  --color-neutral-300:#E5E5EA; --color-neutral-400:#D5D6DD;
  --color-neutral-500:#C2C3CD; --color-neutral-600:#ADAEB8;
  --color-neutral-700:#888893; --color-neutral-900:#4A494F;
  --color-neutral-1000:#333236; /* light Gray100; 모드 공통 원시 팔레트 */
  --color-dark-0:#181B28; --color-dark-50:#1E212D;
  --color-dark-100:#242735; --color-dark-200:#2E3243;
  --color-dark-300:#393E50; --color-dark-400:#454B5F;
  --color-dark-500:#646A7D; --color-dark-600:#999CAC;
  --color-dark-700:#BBBDC9; --color-dark-800:#D3D4DD;
  --color-dark-900:#EEEEF1; --color-dark-1000:#F7F7F8;
  --action-primary:#9933FF; --action-hover:#8F00FF; --action-active:#760DDE;
  --text-link:#20A7B1;
  --bg-base:#FFFFFF; --bg-elevated:#FFFFFF; --bg-subtle:#F6F6F8; --bg-secondary:#FBFBFB; --bg-overlay:rgba(8,12,20,.55);
  --text-primary:#333236; --text-secondary:rgba(51,50,54,.8); --text-tertiary:rgba(51,50,54,.5); --text-disabled:rgba(51,50,54,.3); --text-on-primary:#FFFFFF;
  --text-purple:#760DDE; --text-purple-secondary:#9933FF; --bg-purple:#F8ECFF; --logo-color:#6500C3;
  --border-default:rgba(51,50,54,.2); --border-subtle:rgba(51,50,54,.1); --border-strong:#333236; --border-focus:#9933FF;
  --color-success-fg:#07AC30; --color-success-bg:#EBFFEB; --color-warning-fg:#A34900; --color-warning-bg:#FFF7E5; --color-error-fg:#D6173A; --color-error-bg:#FFC9C7; --color-info-fg:#004BBD; --color-info-bg:#EBF3FF;
  --code-keyword:#B4002B; --code-function:#0056D8;
  --font-ui:'Spoqa Han Sans Neo','SpoqaHanSansNeo','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --font-code:Menlo,'SFMono-Regular',Consolas,monospace;
}
[data-theme="dark"] {
  --bg-base:#181B28; --bg-elevated:#1E212D; --bg-subtle:#242735; --bg-secondary:#1E212D; --bg-overlay:rgba(8,12,20,.7);
  --text-primary:#F7F7F8; --text-secondary:rgba(247,247,248,.8); --text-tertiary:rgba(247,247,248,.5); --text-disabled:rgba(247,247,248,.3); --text-on-primary:#FFFFFF;
  --text-purple:#CD96F8; --text-purple-secondary:#C47CFD; --bg-purple:#2E2443; --logo-color:#CD96F8;
  --border-default:rgba(247,247,248,.2); --border-subtle:rgba(247,247,248,.1); --border-strong:#F7F7F8; --border-focus:#C47CFD;
  --color-success-fg:#68EC75; --color-success-bg:#065433; --color-warning-fg:#FFE878; --color-warning-bg:#473714; --color-error-fg:#D6173A; --color-error-bg:#650205; --color-info-fg:#A6D1FF; --color-info-bg:#173354;
  --code-keyword:#FBBAC6; --code-function:#A6D1FF;
}

추정으로 보완한 값: 동작 상태, 경고·정보 색 조합, 긍정 상태 배경, 다크 보라 바탕 #2E2443, 다크 경고·정보 바탕, 오버레이, 코드 구문 색, 다크 로고 색. 공개 팔레트의 색을 썼어도 용도가 확인되지 않으면 공식 시멘틱으로 부르지 않는다.

카드의 회색 경계선·보조 글자·로고 강조색은 축소 화면용 조정값(추정)이다. 문제 도식은 같은 구성을 유지하고, 다크에서는 공식 다크 회색 면과 밝은 글자색을 쓴다.

Typography

타이포그래피

한글·영문·숫자는 공식 Spoqa Han Sans Neo, 코드는 Menlo다. 문서의 굵기 표기를 따라 Regular400 / Medium500 / Bold600을 쓴다. 외부 폰트는 불러오지 않으므로 설치 환경에 따라 시스템 대체 서체로 보인다. 이번 Windows 미리보기에서는 브라우저 글리프 검사로 맑은 고딕 사용을 확인했다. 공식 서체의 실제 렌더와 동일하다고 보지 않는다.

위계 (크기 / 굵기 / 행간 / 자간):
- Display: 54px / 600 / 70px / -1.5px — 공식 glyph54, 서비스 소개.
- H1: 38px / 600 / 50px / -.3px — 공식 glyph38.
- H2: 28px / 600 / 40px / -.3px — 공식 glyph28.
- H3: 24px / 600 / 36px / -.3px — 공식 glyph24.
- Body Large: 20px / 500 / 32px / -.3px — 공식 glyph20.
- Body: 18px / 400 / 30px / -.3px — 공식 glyph18.
- Body Small: 14px / 400 / 22px / -.3px — 학습 도구 밀도에 맞춘 추정.
- Caption: 13px / 400 / 20px / -.3px — PC의 glyph12 이하 회피 지침에 맞춘 추정.
- Code: 13px / 400 / 21px / 0 — Menlo는 공식, 크기·행간은 추정.

공식 문서는 PC에서 12px 이하 글자를 피하도록 안내한다. ⑫의 900px 미리보기에는 10~12px의 편집기·보조 항목을 제한적으로 썼고, 실제 서비스에 적용할 때는 작업면을 넓혀 본문을 키운다. 카드의 7~11px 글자는 280×210 미리보기에서만 쓰는 축약 표현이다. 강조를 위해 본문 전체를 굵게 만들지 않는다.

Spacing

스페이싱

기본은 4px / 8px, 정밀 조정은 2px / 6px다. 공식 content-gap은 XL32·L24·M16·S12·XS8. 아래 별칭은 크기 순으로 맞췄다.

:root {
  --space-2xs:2px; --space-xs:4px; --space-sm:8px;
  --space-md:16px; --space-lg:24px; --space-xl:32px;
  --space-2xl:48px; --space-3xl:64px;
  --content-gap-xs:8px; --content-gap-sm:12px;
  --content-gap-md:16px; --content-gap-lg:24px; --content-gap-xl:32px;
  --container-max:1200px; --container-pad:40px;
}
@media (max-width:1199px) { :root { --container-pad:32px; } }
@media (max-width:767px) { :root { --container-pad:16px; --content-gap-xl:24px; --content-gap-lg:20px; --content-gap-md:12px; --content-gap-sm:10px; --content-gap-xs:6px; } }

공식 일반 웹 레이아웃은 PC 1200px 이상, 태블릿 768~1199px, 모바일 768px 미만이다. PC 최대 컨테이너는 1200px, 모바일 기준 최소 폭은 375px. ⑫는 IDE의 연속된 패널을 보이기 위해 900px까지 작업면을 사용하고 600px 이하에서 세로로 쌓는다(학습 화면 재구성용 추정). 공개 일반 레이아웃의 별도 공식 IDE 규격으로 해석하지 않는다.

Border Radius

공식 시멘틱 반경은 XS8 / S12 / M16 / L20 / XL28 / Circle999다. 바깥 상자 안에 들어가는 상자는 한 단계 작은 반경을 쓴다.

:root {
  --radius-none:0; --radius-xs:4px; /* 선으로 구분하는 패널 / 작은 내부 요소 */
  --radius-sm:8px; /* 공식 XS · 버튼·레이블 */
  --radius-banner:12px; /* 공식 S · 넓은 배너 */
  --radius-md:16px; /* 공식 M · 작은 독립 상자 */
  --radius-lg:20px; /* 공식 L · 큰 상자 */
  --radius-xl:28px; /* 공식 XL · 큰 컨테이너 */
  --radius-full:999px; /* 선택 탭·XP 배지 */
}
@media(max-width:767px){:root{--radius-sm:6px;--radius-banner:10px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;}}

모바일 대응 8→6,12→10,16→12,20→16,28→24는 공식 표다. 전체 IDE를 하나의 둥근 카드로 감싸지 않는다. 설명 그림의 타일 반경은 도식 비율에 맞춘 추정이다.

Shadow / Elevation

공개 자료에서 그림자 수치를 확인하지 못했다. 아래 수치는 모두 추정이며, 실제 학습 화면의 얕은 면 분리를 유지하도록 제한했다.

:root {
  --shadow-none:none; /* 기본 학습 패널 */
  --shadow-sm:0 1px 3px rgba(8,12,20,.06); /* 얕은 떠 있는 조작부 */
  --shadow-md:0 4px 12px rgba(8,12,20,.10); /* 짧은 팝오버 */
  --shadow-lg:0 8px 24px rgba(8,12,20,.16); /* 도움말 */
  --shadow-xl:0 16px 48px rgba(8,12,20,.22); /* 학습 환경 설정 모달 */
}

코드·문제·GURU 사이에는 그림자를 넣지 않고 border-secondary 또는 border-tertiary를 쓴다. ⑫ 기본 패널에는 shadow-none을 적용한다.

Iconography

스타일: 기본 Outline, 선택된 상태는 Filled를 허용한다. 코드·실행·책·기록·저장처럼 기능이 다른 기호를 쓴다.
공식 규격: 24px 격자, 2px 안전 영역. XS12 / S16 / M20 / L24 / XL28. 선 굵기는 Normal 1.3px, Bold 1.8px.
모서리 처리: 둥근 선 끝과 이음. 내부 모서리는 0~2px 범위. 제품 로고는 사이트의 공식 SVG 경로를 그대로 사용한다.
추천 소스: 공개 아이콘 규격에 맞춘 자체 인라인 SVG. 별도 라이브러리가 공식 채택되었다는 근거는 확인하지 못했다.
실제 학습 화면에서 본 요소: GURU의 다색 별, 코드 파일, 북마크, 저장, 기록, 새 대화. 예시의 GURU 별은 관찰한 형태를 재구성했다(추정).
조작 영역: 공식 지침은 PC 아이콘 주변 8px 여유, 모바일·태블릿은 아이콘 크기 2배의 터치 영역을 안내한다. 미리보기 속 작은 기호를 실제 서비스 터치 크기로 사용하지 않는다.

Component Guide

컴포넌트 가이드 (상태별 CSS)

기본 변수는 공식 토큰에 대응한다. 버튼 높이, 비활성 배경, hover/active/로딩 동작은 제품 화면을 바탕으로 정한 추정 구현값이다. 흰 글자와 보라색의 강한 행동 버튼은 실행·다음 레슨에, 윤곽 버튼은 채점·보조 행동에 쓴다. 결과는 색과 “통과 / 다시 도전” 문장을 함께 보여 준다.

.ci-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:7px 16px;border:1px solid transparent;border-radius:var(--radius-sm);font-family:var(--font-ui);font-size:13px;line-height:20px;font-weight:500;white-space:nowrap;text-decoration:none;transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out);position:relative}
.ci-button-primary{--button-bg:var(--action-primary);--button-hover:var(--action-hover);--button-active:var(--action-active);--button-fg:var(--text-on-primary);--button-border:transparent}
.ci-button-secondary{--button-bg:var(--bg-base);--button-hover:var(--bg-subtle);--button-active:var(--bg-purple);--button-fg:var(--text-primary);--button-border:var(--border-default)}
.ci-button-ghost{--button-bg:transparent;--button-hover:var(--bg-subtle);--button-active:var(--bg-purple);--button-fg:var(--text-purple);--button-border:transparent}
.ci-button-danger{--button-bg:var(--color-error-fg);--button-hover:#B4002B;--button-active:#9C0023;--button-fg:#FFFFFF;--button-border:transparent}
.ci-button{background:var(--button-bg);color:var(--button-fg);border-color:var(--button-border)}
.ci-button:hover:not(:disabled):not([aria-busy="true"]){background:var(--button-hover)}
.ci-button:active:not(:disabled):not([aria-busy="true"]){background:var(--button-active)}
.ci-button:focus-visible,.ci-nav-item:focus-visible{outline:2px solid var(--border-focus);outline-offset:3px}
.ci-button:disabled{background:var(--bg-subtle);color:var(--text-disabled);border-color:var(--border-subtle);cursor:not-allowed}
.ci-button[aria-busy="true"]{pointer-events:none;padding-right:36px;opacity:.8}
.ci-button[aria-busy="true"]:after{content:'';position:absolute;right:12px;width:12px;height:12px;border:1.3px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ci-spin 800ms linear infinite}
.ci-input{width:100%;min-height:40px;padding:9px 12px;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--bg-base);color:var(--text-primary);font:14px/20px var(--font-ui);outline:none}
.ci-input::placeholder{color:var(--text-tertiary)}
.ci-input:focus{border-color:var(--border-focus);box-shadow:0 0 0 2px var(--bg-purple)}
.ci-input[aria-invalid="true"]{border-color:var(--color-error-fg)}
.ci-input[aria-invalid="true"]+.ci-field-help{color:var(--color-error-fg)}
.ci-input:disabled{background:var(--bg-subtle);color:var(--text-disabled);cursor:not-allowed}
.ci-field-help{font:12px/18px var(--font-ui);margin-top:6px;color:var(--text-secondary)}
.ci-card{background:var(--bg-secondary);border:1px solid transparent;border-radius:var(--radius-md);box-shadow:var(--shadow-none)}
.ci-card-emphasis{background:var(--bg-purple)}
.ci-card-outline{background:var(--bg-base);border-color:var(--border-default)}
.ci-badge{display:inline-flex;align-items:center;gap:4px;border:1px solid transparent;border-radius:var(--radius-full);padding:2px 7px;font-size:11px;line-height:18px;font-weight:500;white-space:nowrap}
.ci-badge-solid{background:var(--action-primary);color:var(--text-on-primary)}
.ci-badge-subtle{background:var(--bg-purple);color:var(--text-purple)}
.ci-badge-outline{background:transparent;border-color:var(--border-default);color:var(--text-secondary)}
.ci-nav{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border-subtle);padding:0 16px;background:var(--bg-base)}
.ci-nav-item{padding:12px 8px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--text-secondary);font:13px/20px var(--font-ui);text-decoration:none}
.ci-nav-item:hover{color:var(--text-purple)}
.ci-nav-item[aria-current="page"]{color:var(--text-purple);border-bottom-color:var(--text-purple);font-weight:500}

Primary·Secondary·Ghost·Danger 네 가지는 공통 상태 규칙으로 Default / Hover / Active / Disabled / Loading을 모두 가진다. 로딩에는 행동 이름을 유지하고 회전 표시를 붙인다. 입력 오류는 입력창 색뿐 아니라 바로 아래 설명 문장으로 원인을 알려 준다. 저장 상태는 실행·채점 결과와 구분한다.

Motion

공식 모션 수치는 확인하지 못했으므로 모두 추정이다. 학습 중 텍스트·코드·결과가 밀리지 않게 색 변화 중심으로 사용한다.

:root{--duration-fast:120ms;--duration-base:180ms;--duration-slow:280ms;--ease-out:cubic-bezier(.2,.8,.2,1);--ease-in-out:cubic-bezier(.4,0,.2,1)}
@keyframes ci-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ci-classroom *,.ci-button{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

포인터 이동을 실제로 구현한다면 180ms로 한 단계씩 설명하고 일시 정지를 제공한다. ⑫는 완료 상태를 고정해 보여 주는 정적 예시다. 채점 완료 때 패널 전체가 튀거나 축하 효과가 코드를 가리지 않도록 한다.

Anti-patterns

다음은 공식 문서와 관찰을 바탕으로 정리한 이 예시의 적용 금지 패턴이다. 공식 금지 조항을 그대로 인용한 목록은 아니다.

1. 대표색과 UI 토큰을 섞기 — #6500C3을 Purple90 #6500C2로 정정하거나 모든 실행 버튼을 CI 색으로 바꾸지 않는다. 2. 화면 전체를 보라색으로 채우기 — 문제·코드·대화는 중립 면에 두고, 선택·실행·진도에 보라색을 집중한다. 3. 일반 편집기나 강의 목록만 보여 주기 — 문제 조건·실행·채점·힌트의 연결이 있어야 코드잇의 학습 장면이 된다. 4. GURU가 바로 정답을 대신 쓰게 만들기 — 질문을 받아 다음 추론을 돕는 작은 힌트를 먼저 보여 준다. 학습자의 코드와 피드백을 구분한다. 5. 다크에서 진한 글자와 그림자를 그대로 쓰기 — 모드별 gray100과 보라 글자 토큰을 전환한다. 실패·통과는 색뿐 아니라 글자로 알려 준다.

Sources

출처

Codeit (코드잇) 이름과 로고는 각 권리자의 상표입니다.