Cuddly
Design System v0.1

Brand palette

Neutral palette

기본 바탕은 흰색입니다. 밝은 회색은 배경과 경계에, 짙은 회색은 설명과 제목에 사용해 차분한 읽기 흐름을 만듭니다.

위 수치는 각각 #FFDE03과 #1C1917, 흰색과 #6B5C00 조합의 대비입니다. 흰 바탕의 작은 글자에는 밝은 노란색보다 짙은 잉크색을 사용합니다.

코드 블록을 제외한 모든 글자는 Spoqa Han Sans Neo로 통일합니다. 제목과 본문, 메뉴와 버튼은 물론 날짜·번호·색상 값에도 같은 서체를 사용합니다. 크기와 굵기, 행간으로 정보의 중요도를 구분합니다.

대표 제목은 넓은 화면에서 48px로 커집니다. 본문은 16px에서 18px로 커지며 행간은 글자 크기의 1.8배입니다.

D2Coding 코드 블록 전용 서체

코드 블록에는 D2Coding을 사용합니다. 한글과 영문, 숫자와 기호를 일정한 폭으로 정렬하며, 일반 글자와 인라인 표기는 Spoqa Han Sans Neo를 유지합니다.

가나다라마바사 아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789  { } [ ] ( ) = + - / *
Bold 700 · 한글과 영문 0123456789

실제 코드 블록 예제 살펴보기

Responsive behavior

• 작은 화면480px 이하에서는 헤더를 48px 높이로 줄이고 좌우 12px 여백을 확보합니다. 메뉴는 한 줄로 유지합니다.
• 읽기와 탐색화면이 좁아지면 본문과 카드가 자연스럽게 쌓입니다. 이 문서의 목차도 본문 위로 이동합니다.
• 이미지 그리드Gallery는 정사각형 2~4열, Anime·Games는 4:3 비율 1~4열로 배치합니다. 모든 이미지 그리드는 가로·세로 간격 없이 이어 붙입니다.

일반 카드에는 그림자를 사용하지 않습니다. 상세 화면처럼 다른 콘텐츠 위에 떠 있는 영역에는 그림자를 사용해 깊이를 구분합니다.

Buttons & links

주요 행동은 노란색으로, 보조 행동은 흰 바탕과 테두리로 구분합니다. 사용할 수 없는 버튼은 흐리게 표시합니다. 짧고 구체적인 문구로 누른 뒤의 행동을 안내합니다.

Navigation

위는 메뉴의 외형 예제입니다. 브랜드는 왼쪽, 메뉴는 오른쪽에 배치합니다. 현재 메뉴에는 3px 노란 밑줄을 사용하고 배경은 흰색을 유지합니다. 메뉴에 속하지 않는 화면에서는 선택 표시를 두지 않습니다.

Form controls

입력 영역은 얇은 회색 테두리와 12px 내부 여백을 사용합니다. 포커스 상태에서는 기존 1px 테두리의 색상만 Primary 노란색으로 바뀝니다. 바깥에 선이나 그림자를 추가하지 않습니다. 오류가 있으면 수정할 내용을 글로 함께 안내합니다.

Cards, lists & feedback

알림의 외형을 보여주는 예제입니다. 성공·오류·빈 상태는 색상과 문구를 함께 사용해 구별합니다.

Pagination & disclosure

위는 페이지 이동의 외형 예제입니다. 현재 번호는 노란 배경과 어두운 글자로 구분합니다. 길고 자세한 설명은 필요할 때 펼쳐 볼 수 있게 합니다.

Gallery 정사각형 · 간격 0px

릿카의 애니메이션 이미지를 정사각형으로 채워 빈틈없이 이어 붙입니다. 작은 화면에서는 2열, 중간 화면에서는 3열, 넓은 화면에서는 4열로 배치하며 이미지 사이에 여백을 두지 않습니다.

Anime & Games 4:3 · 간격 0px

작품 표지는 4:3 비율로 빈틈없이 이어 붙입니다. 제목은 어두운 그라데이션 위에 흰색으로 표시하며, 이미지 사이에 여백을 두지 않습니다.

위 이미지는 그리드 배치를 보여주는 예시입니다. GIF 애니메이션을 유지하며 격자 안에서는 이미지를 정해진 비율에 맞춰 채우고, 게시글 본문에서는 원래 비율을 유지합니다.

상세 정보

닫기

별빛을 따라

별을 찾아 떠나는 이야기

GOAT

감상 완료4.5 / 5.0

시작일

2026.10.01

완료일

2026.10.12

메모

잔잔한 밤의 색감과 여운을 남기는 장면을 기록하는 공간입니다.

위는 축소된 구성 예제입니다. 아래 버튼으로 실제 크기의 모달을 열어 보실 수 있습니다.

• 배경과 패널검정 60% 배경 위에 각진 흰색 패널을 띄웁니다. 최대 너비는 896px이며, 화면 가장자리에 16px 여백을 확보합니다.
• 내용 배치작은 화면에서는 표지 아래에 정보를 쌓고, 넓은 화면에서는 이미지와 설명을 나란히 배치합니다. 제목·상태·평점·기간·메모 순서로 읽을 수 있습니다.
• 높이와 닫기화면 높이의 90% 안에서 내용을 스크롤합니다. 닫기 버튼이나 배경을 누르거나 Escape 키를 사용해 닫을 수 있습니다.

문서의 모달 예제에서는 열린 동안 키보드 탐색을 모달 안에 유지하고, 닫으면 열기 버튼으로 포커스를 돌려줍니다.

Code blocks D2Coding · 구문 강조

어두운 배경 위에 D2Coding과 구문별 색상으로 코드를 표시합니다. 아래는 간단한 인사말을 만드는 JavaScript 예제입니다. 긴 줄은 코드 영역 안에서 가로로 스크롤할 수 있습니다.

const message = '안녕하세요, Cuddly!';

function greet(name) {
    return `${message} ${name}님`;
}

console.log(greet('방문자'));

• 읽기본문은 16~18px, 행간은 글자 크기의 1.8배입니다. 긴 글에도 여유 있는 리듬을 유지합니다.
• 코드와 표코드 블록은 어두운 바탕과 D2Coding 서체로 구분합니다. 긴 코드나 넓은 표는 해당 영역 안에서 가로로 스크롤할 수 있게 합니다.
• 이미지본문 이미지는 너비에 맞춰 표시하고 원래 비율을 유지합니다. 갤러리와 미디어 표지는 일정한 비율로 묶어 배치합니다.
• 문구‘저장’·‘질문 보내기’처럼 행동을 구체적으로 표현하고, 안내는 짧은 존댓말로 작성합니다.

• 키보드 선택링크와 버튼은 외곽선으로, 입력창은 기존 테두리를 Primary 색상으로 바꾸어 선택 상태를 표시합니다. 메뉴와 입력, 펼침 순서가 자연스럽게 이어지도록 합니다.
• 누를 수 있는 영역주요 조작 영역은 가로·세로 44px 이상을 권장합니다. 작은 화면에서도 주변 요소와 간격을 확보합니다.
• 색상과 움직임색상만으로 상태를 전달하지 않고 문구나 형태를 함께 사용합니다. 필수적이지 않은 움직임은 줄이고, 글자와 배경의 대비를 확보합니다.
• 구조와 설명제목은 순서에 맞게 배치하고, 입력 항목에는 항상 이름과 필요한 안내를 제공합니다. 이미지의 의미를 이해할 수 있는 설명도 함께 준비합니다.

이 항목은 더 편안한 사용 경험을 위한 디자인 원칙입니다. 사이트 전체의 접근성 인증을 의미하지 않습니다.

화면을 채우는 장식보다 내용을 이해하는 데 도움이 되는 표현을 우선합니다. 필요한 요소만 간결하게 배치하는 것이 Cuddly 디자인의 기준입니다.