한 글자씩,
한 장씩.

글과 타건에 집중하는 노트.

200편의 창작 글을 제목부터 끝까지 입력합니다. 문장은 3~6개로 구성하며 전문을 펼쳐 보여줍니다. 매 접속은 표지에서 시작하고, 쓰기를 누르면 저장된 페이지와 커서로 이어집니다. 완료한 글은 다시 읽을 수 있고 새로운 글로 중복 출제하지 않습니다.

표지의 큰 제목(88px·모바일 56px)은 노트가 담은 글의 성격을 밝히며 표지에서 가장 큰 요소입니다. 로고는 하단 왼쪽에 작게(120px·모바일 104px) 두어 노트끼리 제목으로 구분됩니다. 햇살·창가·찻잔처럼 하루에 머무는 감각을 담은 «일상의 작은 장면» 200편과, 작은 습관과 마음가짐을 다지는 잠언 «오늘의 한 문장» 100편, 하늘·물·몸·별에 숨은 까닭을 푸는 기초 과학 «작은 과학» 30편이 있습니다. 노트 사이에 순서가 없으므로 번호를 붙이지 않고, 책등·커서·종이·버튼은 모든 노트가 같습니다.

첫 화면은 사이트 소개입니다. 노트와 같은 왼쪽 기준선에 로고(120px), «한 줄씩 따라 쓰는 타자 수첩.»(56px·700, 짧은 화면 44px, 모바일 34px), 16px 설명과 12px 안내를 두고, 그 아래 노트 슬라이드를 화면 높이에 맞게 왼쪽 위를 기준으로 작게(데스크톱 42~62%, 모바일 60~72%) 보여 주어 세 수첩이 한 줄로 보입니다. 수첩을 누르거나 고르면 소개가 240ms 동안 흐려지면서 접히고, 작은 수첩은 왼쪽 기준선을 지킨 채 620ms 동안 원래 크기로 커지며 제자리로 올라옵니다. 탭은 그 뒤에 나타나 노트 고르는 화면만 남습니다. 소개 화면에서 쓰기를 누르면 접힘이 끝난 뒤 바로 펼쳐지며, 특정 글 링크로 들어오면 소개를 건너뜁니다.

한 줄씩 따라 쓰는
타자 수첩.

짧은 글을 따라 치면 타건의 리듬이 물결로 그려지고, 다 쓴 글은 수첩에 한 장씩 쌓입니다. 마음에 드는 수첩을 골라 첫 장을 펼쳐 보세요.

설치나 가입 없이 바로 시작하고, 기록은 이 브라우저에 남습니다.

표지는 노트들이 옆으로 나란한 한 줄입니다. 처음에는 «일상의 작은 장면»이 선택되고 옆 노트(가운데 노트는 양옆)는 불투명 유리 밑에 놓인 것처럼 흑백·흐림 3px·옅은 안개(대비 78%·밝기 108%·농도 60%)로 걸쳐 보이며, 제목 끝 깜박이는 커서는 선택된 노트에만 켜집니다. 표지 위 12px 노트 이름 탭, 걸친 노트, 좌우 화살표, 가로 스와이프로 고르면 500ms 동안 옆으로 미끄러집니다. 쓰기를 누르면 탭과 옆 노트가 240ms 동안 먼저 사라지고, 선택된 표지만 남은 뒤 속지로 넘어갑니다. 선택된 탭만 잉크색과 코발트 밑줄로 표시하며, 노트마다 진행을 따로 저장합니다.

로고는 직접 그린 벡터 레터링을 사용합니다. 표지에는 선명하게, 속지 오른쪽 상단에는 회색 인쇄처럼 옅게 표시하고 공식 주소를 함께 둡니다.

선명한 글자, 절제된 블루.

노트를 구성하는 표지·버튼·쪽번호·주소·스티커는 Pretendard를 사용합니다. 직접 입력하는 제목과 본문, 다시 읽는 글은 나눔스퀘어라운드를 사용해 둥근 획과 고른 글자 비례로 편안하게 읽히게 합니다. 노트의 인쇄된 안내와 작성 글을 서체로 명확히 구분합니다. 본문은 Regular(400), 제목은 Bold(700)이며 자간은 0입니다. 제목은 데스크톱 40px·모바일 30px, 본문은 34px·24px, 본문 행간은 1.4입니다. 34px는 가장 긴 문장도 912px 노트에서 한 줄에 들어가는 크기입니다. 아직 쓰지 않은 글자는 연한 회색(#B8BCC6), 입력한 정답과 완료한 줄은 진한 잉크색(#17191E)으로 구분합니다. 조합 중인 글자는 파란색, 오타는 붉은색과 밑줄로 표시합니다. 문장의 크기는 입력 순서에 따라 바뀌지 않습니다.

펼친 종이 한 장의 질서.

왼쪽 책등은 직선으로, 오른쪽 모서리는 18px(모바일 14px)로 둥글게 처리합니다. 표지와 속지는 높이 780px·640px를 공유하며 긴 글은 자연스럽게 늘어납니다. 화면 세로가 짧으면 수첩 전체가 화면에 보이도록 높이를 줄이되 600px·480px 아래로는 줄이지 않습니다. 문장이 길지 않으므로 수첩의 최대 가로 폭은 912px로 두어 가장 긴 문장도 한 줄에 들어가게 하고, 좁은 화면에서는 화면 폭에 맞춰 줄어듭니다. 표지와 속지의 안쪽 여백은 좌우 48px·20px, 위 32px·24px, 아래 40px·28px로 통일합니다. 간격은 8·16·24·32·48px의 공통 단계를 사용합니다.

제목 아래부터 본문 행간에 맞춘 가로줄이 빈 공간까지 이어집니다. 하단 페이지 조작 영역에는 줄을 넣지 않습니다. 종이 단면은 #686868과 #393939로 또렷하게 겹치고 그림자는 짧게 제한합니다. 스프링·누런색·말린 모서리는 사용하지 않습니다.

표지 왼쪽 책등에는 코발트 천 제본처럼 18px(모바일 10px) 띠를 두고, 경계에 얕은 접힘 그림자를 넣습니다. 큰 제목 끝에는 로고 심벌의 가는 입력 커서를 코발트로 이어 깜박이게 해 쓰기를 기다리는 노트임을 보여줍니다. 움직임 줄이기에서는 커서가 멈춘 채 표시됩니다.

웨이브는 노트 안쪽 상단 왼쪽 공간을 사용합니다. 오른쪽 로고 너비 136px·106px와 간격 32px·16px를 확보합니다. 연습 화면에는 하단 푸터를 두지 않고 노트만 바탕 위에 놓으며, 노트 아래에 24px 여백을 남깁니다.

쓰고, 넘기고, 덮습니다.

노트 행동은 높이 44px, 글자 12px, 아이콘 18px, 아이콘과 문구 간격 8px를 공유합니다. 쓰기는 펜 아이콘과 메인 블루, 덮기는 닫힌 책과 보조 윤곽선으로 구분합니다. 이전·다음은 44px 버튼 안에 20px 화살표를 둡니다.

쪽번호는 본문이 비워 둔 속지 오른쪽 아래에 세 자리 숫자 하나로 인쇄합니다. 168px(모바일 104px)·Light(300)·균일한 숫자폭으로 크게 두고 잉크 농도 5%로 흐리게 처리합니다. 가로줄과 글자 아래에 놓여 읽기와 입력을 가리지 않으며, 하단에 작은 쪽번호를 중복으로 두지 않습니다. 하단 왼쪽에는 지금 쓰는 노트의 제목(«일상의 작은 장면»·«오늘의 한 문장»·«작은 과학»)을 속지 배경처럼 은은하게(24px·모바일 15px, 잉크 농도 14%) 인쇄하고, 하단 오른쪽에는 이전 → 다음 → 덮기를 배치합니다. 쓰기와 덮기는 각각 노트 오른쪽 끝에 놓입니다. 덮기는 입력을 보존하고 표지로 돌아가며, 쓰기는 현재 페이지를 복원합니다.

Enter로 다음 줄, 빈 줄에서 Backspace로 이전 줄에 돌아갑니다. 한글 조합 중인 글자는 확정 전까지 오타로 처리하지 않습니다. 별도 설정·기록 메뉴나 결과 화면, 상단 통계는 두지 않습니다.

타건은 리듬으로, 완성은 스티커로.

96개 막대가 64px 높이 안에서 타건에 반응합니다. 대기 막대는 3px, 간격은 기본 3px이며 좁은 화면에서는 1px입니다. 글의 처음부터 끝까지 진행 위치가 이동하며 주변 막대가 위아래로 펼쳐집니다. 진행 위치 세로선은 쓰는 중인 페이지에만 표시하고, 표지와 이미 쓴 글을 다시 읽는 페이지에서는 대기 점선만 남깁니다. 별도 리듬 제목이나 기록 그래프는 표시하지 않습니다.

글을 완료하면 마지막 문장 끝에 타수와 날짜를 담은 우표형 스티커를 붙입니다. 작은 천공 가장자리, 얇은 프레임, 미세한 잉크 농도 차이와 -3도 기울기를 사용합니다. 420ms 동안 내려앉은 뒤 1.6초간 타수를 보여주고 다음 미완료 글로 넘깁니다. 이전 글에서는 붙이는 효과를 반복하지 않습니다.

쓰기와 덮기는 표지가 넘어갑니다. 쓰기를 누르면 표지가 왼쪽 책등을 축으로 720ms 동안 들려 옆으로 넘어가고(원근 3600px, 0→-90도, 밝기 100→86%), 그 아래 속지 글이 나타납니다. 덮기와 첫 쪽에서 이전을 누르면 표지가 같은 길을 거꾸로 640ms 동안 넘어와 속지를 덮습니다. 속지도 같은 방식으로 넘어갑니다. 다음과 한 편 완료 후 다음 글은 지금 속지가 왼쪽으로 넘어가며 아래 새 속지를 드러내고, 이전은 앞 속지가 왼쪽에서 넘어와 지금 속지를 덮습니다. 확대·블러는 사용하지 않습니다. 움직임 줄이기에서는 이동·붙이기 효과를 생략하지만 타수 확인 시간은 유지합니다. 진행과 완료 타수·날짜는 이 브라우저에 저장하며, 과거 날짜가 없는 기록은 추정하지 않습니다.

같은 컴포넌트로 보는 표지와 속지.

실제 화면과 같은 종이·로고·웨이브·버튼·완료 스티커입니다. 표지 위 탭이나 옆 노트를 눌러 노트 슬라이드를, «표지 펼침 다시 보기»로 표지가 넘어가는 모습을 확인할 수 있습니다. 아래는 완료 타수 320의 예시이며 페이지 화살표는 동작하지 않습니다.

일상의 작은 장면오늘의 한 문장작은 과학

TAJALAB / NOTEBOOKtajalab.web.app

일상의
작은 장면

햇살과 창가, 찻잔처럼 하루에 머무는
200편의 짧은 이야기.

읽고, 쓰고, 다시 펼쳐 보는 수첩.

쓰기

TAJALAB / NOTEBOOKtajalab.web.app

오늘의
한 문장

작은 습관과 마음가짐을 다지는
100편의 짧은 문장.

읽고, 쓰고, 다시 펼쳐 보는 수첩.

쓰기

TAJALAB / NOTEBOOKtajalab.web.app

작은
과학

하늘과 물, 몸과 별에 숨은 까닭을 푸는
30편의 짧은 과학 이야기.

읽고, 쓰고, 다시 펼쳐 보는 수첩.

쓰기

tajalab.web.app

첫 페이지

새 공책을 펼쳐 보았다.

첫 줄에 오늘의 날짜를 적었다.

작은 시작이면 충분했다.