Slide it (슬라이드처럼 보여주기)은(는) 무엇을 하나요?
페이지를 프레젠테이션 형태로 만듭니다. 각각 하나의 질문에 답하는 화면들이 쌓여 있는 구조입니다. 질문은 작게, 답변은 한두 문장으로 크게 표시하고, 그 아래에는 실제 상황이 일어나는 모습을 보여주는 라이브 장면이 있습니다. 예를 들어 고객이 줄을 서거나, 엔진을 통해 공기가 흐르거나, 돈이 상품을 쫓는 모습 등입니다. 독자는 하나의 컨트롤을 조작하며 장면이 변하는 것을 보고, '보면서 이해'하며, 어떤 화면에서든 멈춰서 무언가를 이해할 수 있습니다. 페이지는 해당 주제에 맞는 잘 만들어진 앱처럼 느껴집니다. artifact-design이 플랫폼 규칙(테마, 휴대폰 너비, CDN, 단일 체크)을 유지합니다. 사용자가 이 스킬을 설치했으므로, 이 스킬의 규칙이 artifact-design의 기본값과 다를 경우 사용자의 의도로 간주하세요.
1. 핵심 요점 찾기
한 문장으로 작성하세요: 독자가 첫 번째 화면을 본 후 이해하거나 결정해야 할 내용입니다.
2. 가장 가까운 예제 열기
이 콘텐츠와 가장 가까운 예제를 열고 전체를 읽은 후 계획을 세우세요: examples/explainer.html(어떻게 작동하는지 설명), examples/decision.html(선택 또는 비교), examples/plan.html(계획, 여행, 타임라인). 이것이 구조, 장면, 코드의 기준입니다. 동일한 방식으로 페이지를 만드세요.
3. 화면 계획하기
화면 목록을 작성하세요. 화면 1은 독자가 보고 조작하면서 핵심 요점을 찾을 수 있게 합니다. 다음 각 화면은 이전 화면이 제기한 질문(왜, 어떻게, 얼마나, 다음은 무엇)에 답합니다. 콘텐츠 주제가 바뀔 때만 새 주제가 시작됩니다. 화면은 4개에서 7개 사이입니다.
각 화면에 대해 답변에 다음을 작성하세요:
- 화면이 답하는 질문. 독자가 묻거나 검색할 방식으로, 그 자체로 명확하게, 5단어 이내로 작성합니다(예: "10K는 얼마나 걸릴까?" vs "얼마나 걸릴까?" 안 됨). 이 질문은 답변 위에 작게 표시되며 메뉴에서 화면을 식별합니다. 화면 1의 질문은 주제 이름을 지정하여, 페이지에 도착한 독자가 무엇에 관한 페이지인지 알 수 있게 합니다.
- 답변: 한두 문장.
- 장면: 한 줄로 설명합니다. 화면에 무엇이 있고, 무슨 일이 일어나며, 독자가 무엇을 하고, 장면에서 어떤 숫자를 읽을 수 있는지.
장면은 몇 가지 패턴에서 비롯됩니다: 시스템을 통과하는 한 단위 추적, 단계를 통한 흐름, 회전하는 메커니즘, 하나의 규칙을 따르는 에이전트 군집, 필드 내 트레이서, 스크러버가 있는 재생, 전/후 분할, 또는 채우고 비우는 탱크. 만약 "컨트롤, 숫자, 막대"만 있고 화면에 실제 사물 자체가 없는 것은 대시보드입니다. 이를 장면으로 다시 작성하세요.
장면은 설명을 제공합니다. 페이지의 모든 실제 숫자는 콘텐츠에서 가져오며, 추정치인 경우 레이블을 붙입니다.
각 화면에는 장면 아래에 해당 화면의 나머지 이야기를 담은 접힌 "More" 섹션이 있습니다: 몇 가지 짧은 포인트, 배경 숫자, 주의사항 등. 출처와 어떤 화면에도 속하지 않는 내용은 마지막에 접힌 "Full notes" 섹션에 넣거나 생략합니다.
모든 화면에 질문, 답변, 장면 설명이 있고, 접힘 바깥의 텍스트가 각각 40단어 이하일 때 완료됩니다(레이블과 숫자는 제외).
4. 디자인 선택하기
이 주제에 사람들이 사용할 앱 이름을 정하세요(여행: 여행 앱, 비즈니스 결정: 현대 비즈니스 도구). 그리고 styles/에서 해당 파일만 열어 사용하세요. 사용자가 이름을 지정한 스타일이 있으면 그것으로 대체합니다. 해당 스타일의 팔레트와 타이포그래피를 가져와 각 화면에 그 색상의 큰 영역 하나를 제공합니다.
5. 제작하기
- 예제와 마찬가지로 kit/screens.html을 기반으로 제작합니다: 모든 화면이 DOM에 있고 페이지는 일반적으로 스크롤되며, 데스크톱에서는 질문 목록이 오른쪽 가장자리에 항상 표시되고(휴대폰에서는 탭), 각 화면마다 "More" 접힘, 마지막에 Full notes, 라이트/다크 전환 버튼이 있습니다.
- 각 장면은 이미 핵심 요점을 보여주는 상태로 열립니다(중간 지점, 0에서 시작하는 빈 프레임이 아님). 해당 화면이 뷰에 들어오면 약 10초 동안 자동으로 재생되다가 마지막 프레임에서 멈춰 독자가 읽는 동안 페이지가 정적이 되게 합니다. 컨트롤을 움직이면 새로운 설정으로 다시 재생되고, 탭하면 일시 정지됩니다. 모션이 줄어든 환경에서는 여전히 핵심 요점을 보여주는 정지 프레임에서 멈춥니다. 숫자는 장면 위에 레이블로 표시되며, 화면의 주인공이 아닙니다.
- 각 화면을 앱 뷰처럼 배치합니다: 장면이 화면에서 가장 큰 요소이며, 휴대폰에서는 너비 전체를 차지하고 데스크톱에서는 넓고 중앙에 위치한 무대를 유지합니다. 그 위에 답변이 크게 표시됩니다.
- 장면이 물리적인 사물(장치, 기계, 건물, 신체 부위)을 그릴 때는 먼저 figures.md를 읽습니다. 이 파일이 등각 투영 키트, 평면 그림, 또는 그림 없음 중 하나를 결정합니다.
파일 도구를 사용하여 직접 페이지를 작성하고, 예제를 수동으로 복사하세요. 스크립트 실행이 허용되지 않을 수 있으므로 페이지는 스크립트에 의존하지 않아야 합니다.
계획된 모든 화면이 페이지에 장면과 함께 동작할 때 완료됩니다.
6. 확인하기
페이지를 렌더링할 수 있다면 휴대폰 너비로 화면 1의 스크린샷을 찍고, 그렇지 않으면 코드를 읽습니다. 다음 질문에 예/아니오로 답하세요:
- 화면에 실제 사물 자체가 있고, 그것의 차트가 아닌가?
- 움직임이 있고, 독자의 컨트롤이 그 움직임을 바꾸는가?
- 독자가 몇 초 안에 무엇을 해야 할지 알 수 있는가?
- 주제가 바뀌면 디자인도 바뀌는가?
개수도 세세요: 화면 수(4~7개)와 접힘 바깥의 단어 수(각 40단어 이하). 실패한 항목을 한 번에 수정한 후 게시하세요.