무늬 종이 제작기

프롬프트

AI가 읽는 제작 지시문입니다. 맨 위 [바꿀 곳]의 값을 바꿔 붙여 넣어도 됩니다.

완성된 HTML 파일 하나의 원문만 답하세요. 설명과 코드 울타리는 붙이지 마세요. 코드를 실행하지 말고 아래 조건에 맞는 HTML 소스만 작성하세요. 파일을 읽거나 쓰고 검색하거나 다른 도구를 호출하지 마세요. 이 답변 지시는 작품 화면에 표시하지 마세요.

[핵심 아이디어]
점과 선의 간격을 바꾸고 반복 무늬를 PNG로 저장합니다.

[바꿀 곳]
제목: 무늬 종이 제작기
부제: 카드 바탕부터 노트 속지까지
강조 색: #536E65

[크기]
창 전체에 맞추는 화면. 1440×900에서는 넓고 정돈된 배치, 390×844에서는 넉넉한 세로 배치입니다. 폭 350~390·높이 460~520인 작은 프레임에서도 글씨와 조작부가 잘리지 않도록 높이에 맞춰 여백·도형·조작부를 함께 줄이거나 재배치합니다. 스크롤은 없습니다. 화면에 보이지 않는 접근성 안내나 임시 다운로드 링크도 문서 너비·높이를 늘리지 않아야 합니다. 숨긴 aria-live 안내는 position:fixed;top:0;left:0;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%)처럼 화면 안에 고정합니다. body 끝의 기본 여백이 있는 absolute 문단이나 화면 밖 좌표를 쓰지 마세요.
종이는 선택한 비율을 정확히 유지하면서 미리보기 영역 안에 들어가는 가장 큰 크기로 보입니다. 가로 폭을 억지로 늘려 비율을 찌그러뜨리거나 종이를 잘라내지 않습니다. 첫 화면부터 작품이 충분히 보이고 첫 1초 안에 분명히 움직입니다. 글씨와 형상 사이에 여백을 두고 모든 한글이 잘리지 않게 합니다. 시스템 글꼴의 굵기와 크기 차이로 차분한 타이포를 만듭니다.

[장면]
차분한 연녹회색 #DEE6E0의 작업대 위에 깨끗한 종이를 놓은 패턴 도구입니다. 크림·갈색·구리 장식은 쓰지 않습니다. 제목은 PC 왼쪽 설정판 맨 위에20~28px로 왼쪽 정렬하고, 오른쪽 대부분은 종이 미리보기입니다. 폰은 위쪽에 제목과 저장 단추를 같은 줄에, 가운데에 완전히 보이는 종이, 아래쪽에 간결한 설정을 둡니다. 화면 가운데 위의 큰 제목·작은 부제 틀은 쓰지 않습니다. 설정판은 가는 구분선과 이름이 있는 기본 폼으로 정돈하고 불필요한 카드 중첩을 피합니다. 폰 높이844에서는 미리보기와 모든 조작을 한 화면에, 높이460~520에서도 두 열 설정과 작은 글씨로 전부 보이게 합니다.
미리보기 캔버스의 가로세로 비율은 저장 PNG와 정확히 같습니다. 캔버스는 object-fit:contain에 해당하는 크기로 전체를 보여 주며 확대 잘라내기·가로 늘이기·위쪽 무늬 잘림은 없습니다. 선택된 비율과 해상도를 별도 작은 글자로 표시합니다. 미리보기에서 보이는 무늬의 개수·위치·색·여백이 저장본에서도 같아야 합니다. 미리보기의 현재 종이 전체를 동일한 정규화 좌표로 크게 그려 저장합니다. 해상도를 바꿔도 모양이나 무늬 개수가 달라지지 않습니다.

[설정]
- select#motif는 점·고리·물결·격자·빗금·작은 십자,6종입니다. select#spacing은32·64·128, 처음64입니다. 선 두께는 처음1.5px, .5~4px입니다. 점의 반지름은 선 두께의3배(처음4.5px)로 하여 작은 미리보기에서도 무늬가 읽히게 합니다. 이 초기값을 CONFIG·폼·안내·다시 시작에서 모두 똑같이 씁니다.
- 선 색과 바탕색은 각각 이름 있는 표준 select로 고르고, 선택 칸 옆에 현재 색의 작은 견본을 보여 줍니다. 좁은 폰에서 여러 색 단추가 줄을 바꾸며 설정판을 늘리지 않게 합니다. 선 견본은 먹색 #38423D, 유칼립투스 #667C70, 포도회색 #776D7C, 흙빛 #987C70. 바탕 견본은 흰 종이 #F4F6F1, 연녹색 #E2EADF, 연자주 #E9E3EC, 옅은 회갈색 #EBE7E0입니다. 첫값은 선 #667C70·종이 #F4F6F1. 선택된 색 이름·견본·실제 선과 종이 색을 같은 상태로 동기화합니다.
- 비율 select는1:1·4:5·9:16, 처음1:1. 해상도 select는1024·2048·4096, 처음1024. 각 값은 기준 정사각형의 한 변 길이 S입니다. 실제 저장 크기는1:1이면S×S, 4:5이면S×(S*5/4), 9:16이면(S*9/16)×S여서 모두 정수이며 비율도 정확합니다. 실제 픽셀 크기를 항상 표시하고 큰 두 크기에는 ‘인쇄용’ 설명을 붙입니다.

[무늬와 저장]
256×256 기본 타일에서 모든 경계가 이어지도록 그리며 간격은256의 약수입니다. 경계를 걸치는 도형은 이웃 복사본도 그려 이중 선이나 끊김이 없습니다. 기본1:1·1024 크기는 타일을 가로세로4번 반복합니다. 가장자리 픽셀 평균 차이는4/255 이하여야 합니다. 다른 비율은 같은 기준 좌표로 자연스럽게 반복하되 미리보기와 PNG가 반드시 같은 전체 그림을 보여 줍니다. 종이 바탕은 불투명입니다.
#export의 ‘PNG 저장’을 누를 때만 현재 설정을 고정하고 canvas.toBlob으로 실제 PNG를 만듭니다. 파일명은 pattern-paper.png입니다. 저장에는 조절부·제목·글자가 들어가지 않습니다. Blob 생성 중 ‘만드는 중…’, 내려받기 시작 후 ‘PNG를 저장했습니다 · 1024×1024’처럼 실제 크기가 들어간 눈에 띄는 짧은 알림을 종이 아래나 저장 단추 옆에 보입니다. 이 알림은 화면 밖에 두지 않습니다. 알림을 위한 한 줄 높이는 처음부터 예약해 저장할 때 미리보기와 설정판이 밀리지 않게 합니다. 실패하면 다시 눌러 시도할 수 있는 짧은 안내가 나옵니다. 다운로드 시작 직후 URL을 너무 일찍 해제하지 말고 다음 프레임 이후 해제합니다.

[처음 화면과 조작]
처음 자동 재생은 초기 점무늬에서0.25초에 간격32의 격자,0.65초에 간격32의 물결로 넘어가며 첫1초 안에 종이 전체가 분명히 달라집니다. 작은 장식만 움직이는 시연은 쓰지 않습니다. 직접 설정을 건드리거나 저장을 누르면 즉시 자동 재생을 끄고 현재 설정을 고정합니다. #demo-toggle은 글자 ‘자동 재생’ 하나, 시연 중 aria-pressed=true, 아니면 false입니다. 멈춤 아이콘과 상태 문장을 한 단추에 섞지 않습니다. 껐다 켜도 첫1초 안에 형태가 바뀝니다. #reset은 점·간격64·선1.5px·첫 색·1:1·1024와 자동 재생을 처음부터 복원하고, 안내 값도 정확히 일치합니다. 저장 알림·실패 알림·임시 강조도 다시 시작에서 모두 지워 처음 모습으로 돌아갑니다. 초기화 직후 한 프레임 동안은 초기값을 그대로 보이고 그 다음부터 자동 재생의 시간을 새로 셉니다. 폼의 실제 값과 무늬 계산은 하나의 상태로 동기화합니다. 터치 기기는 ‘무늬와 색을 골라 저장하세요’, 키보드 기기에만 ‘Tab으로 항목을 옮겨 고르세요’처럼 기기에 맞는 안내를 보입니다. 표준 select의 Home 키와 터치 선택도 동작합니다.
[구현]
단일 HTML 안에 CSS와 JavaScript를 모두 넣는다. 외부 라이브러리·폰트·이미지·네트워크 요청·저장소 없이 오프라인에서 동작한다. 첫 script의 첫 선언은 조절할 값을 모은 CONFIG 객체다. 시스템 글꼴만 쓴다.
화면 크기에 맞춰 배치하고 작은 화면에서도 조작부가 잘리지 않게 한다. 캔버스 DPR은 2 이하로 제한한다. requestAnimationFrame과 초 단위 dt(최대 0.1초)를 사용하고 탭이 숨겨지면 멈춘다. 함수 정의 뒤에 초기화를 실행한다.
키보드와 터치로 같은 핵심 조작을 할 수 있게 하고 조작 안내를 화면에 표시한다. 자동 재생에서는 자동 시연하며 사용자가 조작하면 즉시 직접 조작으로 바뀐다. 다시 시작과 자동 재생 전환 단추를 제공한다. 점수·승패나 게임 전용 전역 상태를 요구하지 않는다.
선택값을 바꾸면 결과 미리보기가 즉시 바뀌는 작은 도구를 만든다. PNG 내보내기는 현재 결과를 canvas.toBlob으로 만들고 로컬 다운로드 링크로 저장한다. 다운로드는 직접 누를 때만 시작하며 서버로 보내지 않는다.

[하지 말 것]
실존 인물·사진·개인 이름, 사람 캐릭터·막대 인간, 남청색·검푸른색·고채도 바탕, 외부 글꼴·이미지·오디오, 시작 전 빈 화면, 스크롤, 잘린 글자, 타이머 기반 애니메이션은 넣지 마세요.

ChatGPT에서 사용

1. 새 대화에 위 프롬프트 전체를 붙여 넣습니다.
2. 완성된 HTML 파일을 받아 PC 브라우저로 엽니다. 코드로 나오면 전체를 UTF-8 result.html로 저장해 엽니다.
3. 대화 안에 미리보기가 있으면 그 자리에서 볼 수 있습니다. 지원 여부는 앱과 버전에 따라 다릅니다.

이 작품은 ChatGPT에서 직접 돌려 보지는 않았습니다. 모델과 추론 강도 선택 화면도 확인하지 않았습니다. 폰에서는 미리보기가 없으면 PC에서 파일을 여세요.

Codex에서 사용

새 빈 작업 폴더의 새 요청에 같은 프롬프트를 넣고 GPT-6.1 Sol · High로 실행합니다. 완성 HTML을 저장해 브라우저로 엽니다. Codex CLI 자체에는 시각 미리보기가 없습니다.

추가 요청 예시

결과가 나온 뒤 같은 대화에서 이어서 요청하면 해당 부분만 수정됩니다.

• 선과 바탕에 차분한 색 견본을 두 가지 더 넣어 주세요.
• 무늬 간격을 더 넓게 조절할 수 있게 해 주세요.
• 자주 쓰는 비율과 색 조합을 선택 단추로 묶어 주세요.