옥스포드 노트 기획서 v1.0 (1차 확정)
| 항목 | 내용 |
|---|---|
| 문서 | 화면 · 동작 · 규칙 기획서 (PRD는 옥스포드 노트 PRD.md) |
| 기준 | HTML 프로토타입 v0.6 (직접 사용 테스트 중). 이 버전을 1차 확정본으로 한다 |
| 작성일 | 2026-11-06 |
| 영감 | 플래너 앱 Spiralday: 스프링 노트 감성과 월 · 주 · 일 정보 구조를 가져옴. 학습에 맞게 재해석했고 시간 블록 같은 플래너 기능은 뺌. |
| 디자인 | Quote 프로토타입(독서노트)의 스프링 노트 · 개구 폰트 · 민트/라벤더/피치 팔레트를 재사용 |
처음 스케치
화면 캡처는 프로토타입 v0.5 샘플 데이터 기준(데스크톱 1240px). 숫자 목표와 타깃은 사용 테스트 후 확정.
1. 서비스 개요
공부한 것을 키워드 · 노트 · Remember 세 칸으로 한 장에 적고, 복습할 때마다 Remember 칸을 직접 새로 채워 기억을 점검하는 학습 노트. 분야마다 목표 · 기간 · 학습 지도 단계를 정하고, 학습 지도(부루마블식 말판)에서 "끝까지 어디까지, 지금 어디쯤"을 본다.
1-1. 어떤 필기법인가 · 어디서 쓰이나 · 어떤 학습에 맞나
필기법의 뿌리 - 이 서비스의 노트 틀은 코넬 노트(월터 포크 교수가 코넬대에서 개발)와 같은 계열의 3분할 구조다. 좁은 단서 칸(키워드), 넓은 필기 칸, 하단 정리 칸으로 나뉜다. - "옥스포드 노트"라는 이름은 수민이 스케치로 정한 서비스 이름이다. 코넬 노트처럼 정형화된 정식 필기법 명칭으로 확인된 자료는 찾지 못했다. 외부에 소개할 때는 "코넬식 3분할 노트를 복습 중심으로 바꾼 것"이라고 설명한다. - 코넬과 다른 점: 하단 칸을 "요약"이 아니라 복습할 때마다 기억에서 꺼내 쓰는 Remember 칸으로 쓰고, 그 이력을 쌓는다.
주로 쓰이는 곳 (코넬식 3분할 필기 기준) - 고등학교 · 대학 수업 필기와 교재 읽기 정리, 이후 성인 학습까지 폭넓게 사용된다. - 온라인 강의, 전자책 학습에도 그대로 쓰인다. - 업무에서는 회의록, 프로젝트 관리, 학습 과정 기록에 활용된다고 소개된다.
잘 맞는 학습 전략 | 전략 | 이 노트에서 하는 일 | |---|---| | 능동적 회상(꺼내 쓰기) | 복습 모드에서 본문을 가리고 키워드만 보며 Remember에 직접 쓴다 | | 간격 두고 반복 복습 | 복습 때마다 새로 쓰고 날짜별 이력을 쌓아 기억 변화를 본다 | | 핵심 뽑기(요약 · 질문 만들기) | 필기하면서 키워드 칸에 핵심어를 뽑는다 | | 단계적 로드맵 학습 | 학습 지도 말판에서 전체 단계와 현재 위치를 본다 |
잘 맞는 사람 · 상황: 강의나 책으로 여러 분야를 독학하는 사람, 자격증 · 어학 · 직무 공부처럼 "얼마나 기억하는지" 확인이 중요한 학습. 반대로 자유로운 아이디어 발산, 표 중심의 비교 정리, 협업 회의록에는 덜 맞는다.
근거 수준: 코넬 노트의 구조 · 사용처는 외부 자료로 확인했다. 위 학습 전략과의 연결은 이 서비스를 설계한 가설이며, 사용 테스트(H1~H5)로 검증한다.
2. 화면 구조
상단 탭 순서: 노트 > 일간 > 주간 > 월간 > 학습 통계 > 내 서재 > 학습 지도, 그 옆에 검색 입력.
공통 요소 - 제목 영역: "옥스포드 노트" + 부제 "키워드 · 노트 · 기억하기" - 우측 상단: 저장 상태(저장됨 / 저장 실패 · 새로고침하면 사라져요) - 샘플 데이터를 보는 중이면 "샘플 데이터" 표시 - 하단: [샘플 데이터로 되돌리기] [빈 상태로 시작] - 분야 인덱스: 포스트잇 모양 탭. 분야색, 노트 수, 중요 분야는 ★와 함께 맨 앞. "인덱스 : 학습분야" 같은 안내 라벨은 없음
| 화면 | 목적 | 주요 구성 |
|---|---|---|
| 노트 | 한 장 작성 · 복습 | 같은 분야 노트 목록, 인덱스 탭, 노트 한 장 |
| 일간 | 하루 단위 학습 보기 | 날짜 이동, 그날 노트 카드, 최근 7일 복습 전 노트 |
| 주간 | 한 주 보기 | 월~일 컬럼, 이번 주 키워드, 노트/키워드/복습 요약 |
| 월간 | 한 달 보기 | 달력(날짜별 노트 제목), 월 요약 |
| 학습 통계 | 쌓인 양 | 전체 · 이번 주 · 복습률 · 키워드 수, 최근 14일 막대, 분야별 막대 |
| 내 서재 | 노트 모아보기 | 전체/분야/분야 없음 필터, 카드, 분야 목표 · 수정 |
| 학습 지도 | 분야별 말판 | 분야 선택, 목표 · 기간, 말판, 칸 상세, 분야 수정 · 삭제 |
3. 노트 화면
3-1. 노트 한 장 배치
┌────────────┬──────────────────────────────────────┐
│ 분야 │ Title 학습 날짜 │
│ 학습 지도 칸├──────────────────────────────────────┤
│ KEYWORD │ Note taking (텍스트 + 이미지) │
│ (세로 칸) │ │
├────────────┴──────────────────────────────────────┤
│ Remember (스티커 메모 + 복습 이력) │
└───────────────────────────────────────────────────┘
| 영역 | 규칙 |
|---|---|
| 분야 | 선택 목록. 처음엔 "분야 선택"(비어 있음), 마지막 항목 "＋ 새 분야 만들기"로 바로 분야 생성. 분야를 바꾸면 학습 지도 칸은 초기화 |
| 학습 지도 칸 | 선택한 분야의 칸 목록에서 선택(선택 안 함 가능). 분야 선택 전에는 비활성 |
| Title | 텍스트 한 줄. 비어 있으면 목록에서 "제목 없음" |
| 학습 날짜 | 날짜 입력. 기본값 오늘 |
| KEYWORD | 입력 후 Enter로 추가, 같은 키워드는 무시, × 로 삭제 |
| Note taking | 여러 줄 입력, 줄 노트 배경. 입력 즉시 저장 |
| 이미지 | [이미지 삽입] 또는 붙여넣기. 긴 변 900px로 줄여 JPEG로 저장. 이미지마다 × 삭제 |
| Remember | 평소에는 비활성(스티커 메모) + "복습 시 직접 쓰는 칸". 복습 모드에서만 입력 |
| 노트 삭제 | 우측 상단 [이 노트 삭제] |
| 새 노트 | [+ 새 노트]. 항상 분야 없이(회색) 열림. 분야를 고르면 분야색으로 바뀜 |
3-2. 노트 색
- 분야 미선택: 회색 시트, 인덱스 탭은 "분야 없음"
- 분야 선택: 분야색이 분야 칸, 키워드 칩, 칸 선택 등에 적용
3-3. 같은 분야 노트 목록(칩)
- 평소: 최근 노트 5개(학습 날짜 최신순, 같은 날짜는 새로 만든 순). 현재 노트는 강조. 5개가 넘으면 [펼치기 +N]
- 펼치기: 학습 지도 칸 순서대로 "1. 칸 이름" 구분 아래 노트 칩을 계속 나열, 칸이 없는 노트는 "칸 없음"에 묶음. [접기]로 되돌림
3-4. 인덱스 탭 동작
- 탭을 누르면 그 분야의 가장 최근 노트로 이동(노트가 없으면 그 분야의 새 노트)
- 탭은 이동만 하고 현재 노트의 분야를 바꾸지 않는다. 분야 변경은 시트 안의 분야 선택에서만
4. 복습 모드
| 상태 | 화면 | 동작 |
|---|---|---|
| 평소 | 본문 · 이미지 보임, Remember 비활성 | [복습 모드] 누르면 복습 상태로 |
| 복습 중 | 본문 · 이미지 흐림 + "키워드만 보고 기억나는 걸 아래에 적어 보세요", 키워드는 보임, Remember 입력 가능("기억하니?") | [확인하기] 또는 [복습 끝내기] |
| 확인 후 | 본문 공개 | 입력이 있으면 날짜와 함께 복습 이력에 추가(n회차). 입력이 없으면 기록 없이 종료 |
- 복습 이력: 최신순 "n회차 · 날짜 · 내용". 복습 횟수는 카드와 학습 지도 상태에 쓰임
- 복습 중 작성하다 다른 노트로 이동하면 작성 중이던 글은 그 노트의 임시 글로 남음(새로고침하면 사라짐)
5. 분야 입력 폼
| 필드 | 필수 | 규칙 |
|---|---|---|
| 분야명 | 필수 | 최대 14자, 같은 이름 불가(대소문자 무시) |
| 목표 | 선택 | 최대 80자 |
| 목표 학습 기간 | 선택 | 시작일 ~ 종료일. 둘 다 있으면 종료일이 시작일보다 빠를 수 없음 |
| 학습 지도 단계 | 필수 1개 이상 | 순서대로 입력, 최대 24자. Enter로 다음 단계 추가, × 삭제, [+ 단계 추가]. 말판의 칸이 됨 |
| 중요 | 선택 | on/off. on이면 인덱스 맨 앞에 ★, 일간 "복습 전" 목록에서 그 분야 노트를 먼저 보여줌 (11/6 확정) |
- 색: 아직 쓰지 않은 분야색을 순서대로 자동 지정
- 수정 시 단계를 지우면 그 칸에 연결된 노트는 칸 연결만 해제, 단계 이름만 바꾸면 연결 유지
-
오류 문구: "분야명을 입력해 주세요." / "이미 있는 분야 이름이에요." / "종료일이 시작일보다 빨라요." / "학습 지도 단계를 1개 이상 입력해 주세요."
-
분야 삭제: 확인 창("이 분야와 학습 지도 칸이 삭제돼요. 노트 N개는 지워지지 않고 '분야 없음'으로 옮겨져요.")
6. 학습 지도(진행 말판)
6-1. 구성
- 위쪽: 분야 탭, 선택 분야의 이름 · 목표 · 기간(남은 일수 D-n, 지나면 "기간 지남 n일"), [분야 수정] [분야 삭제]
- 말판: 직사각형 한 바퀴. 출발(오른쪽 아래) → 칸들 → 도착. 가운데에 분야명, 진행률 막대, "N칸 중 X칸 지나왔어요", 지금 위치, [이어서 배우기] [복습 카드 뽑기]
- 말판 아래: 칸 추가 입력, 선택한 칸의 상세
6-2. 칸 상태
| 상태 | 조건 | 표시 |
|---|---|---|
| 아직 | 연결 노트 없음 | 점선 테두리 |
| 복습 전 | 연결 노트 있음, 복습 기록 없음 | 분야색 띠(아래만 채움) |
| 복습 완료 | 연결 노트 중 하나라도 복습 기록 1회 이상 | 분야색 채움 |
| 이미 아는 칸 | 사용자가 표시 | 분야색 채움, "노트 없이 지나가기" |
- 상태는 저장하지 않고 노트 데이터로 계산한다(이미 아는 칸만 칸에 저장)
- 말(나): 순서상 처음으로 "아직" 또는 "복습 전"인 칸. 모두 완료하면 도착
- 진행률: (복습 완료 + 이미 아는 칸) / 전체 칸
6-3. 칸 수와 배치
- 가로 w칸, 세로 w−1칸의 직사각형. 칸이 4w−8개를 넘지 않도록 w를 5부터 키움
- 남는 자리는 "복습 카드" 칸으로 고르게 분산
- 720px 이하에서는 말판 대신 세로 길(칸 목록)로 표시
6-4. 칸 상세(칸을 눌렀을 때)
- 칸 이름 수정, "이미 아는 칸" 체크, 연결 노트 카드, [이 칸에 노트 쓰기], 앞으로 · 뒤로 이동, 칸 삭제
- 칸을 삭제하면 연결된 노트는 칸 연결만 해제
6-5. 복습 카드 칸
- 같은 분야 노트 중 복습 기록이 없거나 마지막 복습이 오래된 순으로 3개를 추려 무작위 1개를 뽑음
- 키워드와 제목을 보여주고 [복습 모드로 열기]로 해당 노트를 복습 모드로 연다. [다시 뽑기]
- 노트가 없으면 "노트를 먼저 써야 카드를 뽑을 수 있어요."
7. 일간 · 주간 · 월간
| 화면 | 규칙 |
|---|---|
| 일간 | 날짜 이동(◀ ▶ 오늘), 그날 노트 카드, [이 날짜로 새 노트], 선택일 기준 최근 7일 중 복습 전 노트. 복습 전 노트는 중요 분야 노트를 먼저, 같은 순위는 학습 날짜 최신순 |
| 주간 | 월요일 시작. 요일별 노트 제목(분야색 점), 날짜 클릭 시 일간. 노트/키워드/복습 수, 이번 주 키워드 |
| 월간 | 달력, 날짜별 노트 최대 3개 제목 + "+N", 날짜 클릭 시 일간. 월 요약(노트, 학습한 날, 복습한 노트) |
일간
주간
월간
8. 학습 통계 · 내 서재 · 검색
- 학습 통계: NOTES, THIS WEEK, REVIEWED(복습한 노트 비율), KEYWORDS(복습 기록 횟수 표시), 최근 14일 막대, 분야별 노트 막대("분야 없음" 포함)
- 내 서재: 전체 / 분야 / 분야 없음 필터, 노트 카드(분야, 날짜, 제목, 키워드, 복습 상태). 분야를 고르면 목표와 [분야 수정] 표시
- 검색: 제목 · 키워드 · 본문 · Remember 안의 글자를 찾음. 입력하면 내 서재 결과로 이동. 결과 없음 안내 문구
학습 통계
내 서재
9. 데이터
Field { id, name, color, goal, start, end, important, route: Stage[] }
Stage { id, name, known }
Note { id, title, date, field | null, stage | null, keywords[], body, images[], remember: [{date, text}] }
저장: 브라우저 localStorage(임시). 저장 실패 시 상단에 표시.
10. 엣지 케이스 (정함 / 임시 / 미정)
| 영역 | 상황 | 처리 | 분류 |
|---|---|---|---|
| 빈 상태 | 분야 0개 | 학습 지도에 안내 + [새 분야 만들기], 노트에서는 "＋ 새 분야 만들기" | 정함 |
| 빈 상태 | 노트 0개 | 안내 + 첫 노트 쓰기 | 정함 |
| 입력 검증 | 분야명 비어 있음 · 중복, 기간 역순, 단계 0개 | 저장 전 안내 문구 | 정함 |
| 입력 검증 | 제목 비어 있음 | "제목 없음" 표시 | 임시 |
| 입력 검증 | 아무것도 안 쓴 새 노트 | 다른 화면으로 이동하면 자동 삭제 | 정함 |
| 키워드 | 중복 | 무시 | 정함 |
| 복습 | 빈 Remember로 확인 | 기록 없이 종료 | 정함 |
| 복습 | 완료 기준 | 복습 1회 이상 (11/6 확정, 사용 테스트 후 재검토) | 정함 |
| 칸 상태 | 한 칸에 노트 여러 개 | 하나라도 복습했으면 완료 | 임시 |
| 분야 | 분야 삭제 | 노트는 "분야 없음"으로 이동 | 정함 |
| 분야 | 노트의 분야 변경 | 칸 연결 초기화 | 정함 |
| 분야 | 순서 직접 변경 | 중요 분야 우선 + 생성 순 | 미정 |
| 많을 때 | 한 분야 노트 50개 이상 | 최근 5개 + 펼치기(칸 순서 나열) | 임시 |
| 많을 때 | 칸 30개 이상 | 말판이 자동으로 커짐 | 임시 |
| 많을 때 | 노트 200개 이상 | 서재는 카드 나열 | 미정 |
| 이미지 | 큰 이미지 | 900px JPEG 압축 | 임시 |
| 저장 | 용량 초과 · 브라우저 데이터 삭제 | 저장 실패 표시만. 복구 불가 | 미정 (1순위: 백업 · 복원) |
| 삭제 | 노트 · 분야 삭제 실행 취소 | 없음 | 미정 |
| 언어 · 날짜 | 영어 전환, 시간대 | 한국어 고정, 기기 날짜 | 임시 |
11. 변경 이력
| 버전 | 날짜 | 내용 |
|---|---|---|
| v0.1 | 11/5 | 스케치 기반 첫 프로토타입(노트, 복습, 일 · 주 · 월, 서재, 통계) |
| v0.2 | 11/5 | Quote 디자인 적용 |
| v0.3 | 11/5 | 학습 지도를 부루마블식 진행 말판으로 변경 |
| v0.4 | 11/5 | 인덱스 탭이 노트의 분야를 바꾸던 오류 수정, 같은 분야 노트 목록 추가 |
| v0.5 | 11/6 | 새 노트 빈 화면 오류 수정, 새 노트 분야 없이(회색) 열기, 분야 입력 폼(목표 · 기간 · 단계 · 중요) · 수정 · 삭제, 노트 목록 5개 + 펼치기, 빈 상태에서 모두 삭제, "인덱스 : 학습분야" 라벨 삭제 |
| v1.0 | 11/6 | 1차 확정. 프로토타입 v0.6: KEYWORD 글자 크기 축소(화면 폭이 바뀌어도 안 겹침), 분야 선택 글자 축소, 중요 분야 노트를 일간 "복습 전"에서 먼저 표시. 스케치와 화면 캡처 9장 추가, 필기법 소개(1-1) 추가. 분야 삭제 시 노트는 "분야 없음"으로 이동, 칸 완료 기준 복습 1회, 사용 테스트 3일(11/6~11/8) 확정 |
12. 후속 후보
백업 · 복원, 노트 · 분야 삭제 실행 취소, 분야 순서 변경, 영어판, 칸 완료 기준 재검토(테스트 후), 중요 분야 효과 확장, 목표 기간 대비 진행 페이스 표시, AI 학습 지도 초안, 복습 알림.
출처: 이 서비스의 정보 구조와 스프링 노트 감성은 Spiralday에서 영감을 받았다.