Aa, Bb.가나다.
영문 제목은 크게, 한국어 본문은 여유 있게 배치했어요. 긴 작업 설명은 읽기 편하도록 한 줄의 길이를 제한했어요.
OPEN STUDIO / 이 사이트의 작업실Your
Your
display.
이곳에서 화면을 취향에 맞게 바꿀 수 있어요.
마음에 드는 색과 간격을 골라 보세요.
고른 설정은 홈과 프로젝트 페이지에도 적용돼요.
DISPLAY / CONTROL
화면 설정
읽기 편한 화면으로 바꿔 보세요.
01 / DESIGN SYSTEM
화면을 이루는 것들
배경, 글자, 강조색은 각각 역할이 있어요.
위에서 설정을 바꾸면 아래 견본도 함께 바뀌어요.
바탕
페이지의 기본 배경
면
내용을 묶는 영역
글자
제목과 본문
강조
링크와 선택 상태
구분
선과 경계
간격과 모서리
간격 설정은 섹션과 카드 사이의 여백에 적용돼요. 모서리 설정은 카드와 버튼에 적용돼요.
02 / ABOUT THIS SITE
이 사이트의 구성
프로젝트와 사례
홈에는 대표 작업 네 개를 모았어요. 각 상세 페이지에서는 맡은 역할, 구현 과정에서 내린 결정과 검증 결과를 설명해요. 도식은 설명용으로 재구성했고, 수치는 측정 조건과 함께 적었어요.
움직이는 배지
데스크톱에서는 끈에 매달린 배지를 잡아 흔들 수 있어요. 마우스를 따라 기울고 출렁이다가 놓으면 천천히 멈춰요. 방향키로 움직이거나 Home 키로 제자리에 놓을 수도 있어요. 모바일에서는 정적인 배지를 보여줘요.
정적 페이지와 화면 설정
Next.js와 React, TypeScript로 만들었어요. 본문은 정적 페이지로 제공하고, 데스크톱 배지와 화면 설정은 브라우저에서 동작해요. 테마는 화면이 그려지기 전에 적용해요.