AI Tools Lab
전체 메뉴 열기전체 메뉴 닫기
디자인편집 예시

단색 타이포그래피 포스터 만들기

행사명·시간·장소의 읽는 순서를 먼저 정하고, 긴 한글 제목과 인쇄 여백까지 확인하는 단색 포스터 제작 레시피입니다.

Claude Opus 5.5 · HTML · CSS · JavaScript

작성 AI Tools Lab 운영자오류 제보·정정 요청
격자와 빨강·검정 단색으로 구성한 행사 포스터 콘셉트 이미지
AI 생성 콘셉트 이미지 · 실제 실행 캡처가 아닙니다. 내 자료와 목적에 맞춰 새로 만들어 보세요.

01준비할 자료

  • 실제로 사용할 행사명·일시·장소·짧은 안내 문구. 연습용이면 모두 가상 행사라고 표시합니다.
  • 가장 먼저 보여 줄 정보 하나와 두 번째로 보여 줄 정보 하나. 행사명과 날짜를 같은 크기로 넣기 전에 우선순위를 정합니다.
  • 종이 규격 또는 화면의 목표 비율, 사용하는 글꼴의 한글 지원 여부, 단색 팔레트 3개 이내.
  • 제목의 짧은 버전과 가장 긴 버전, 장소명이 두 줄이 되는 경우, 안내 문구가 없는 경우의 시험 자료.

아래 도구는 이 예시의 구현 방향입니다. 선택한 AI 도구에서 코드·파일을 다룰 수 있는지 먼저 확인하고, 설치 버전과 실행 방법을 기록하세요.

02시작 프롬프트

대괄호 안을 내 정보로 바꿔서 사용하세요.

Claude Opus 5.5를 사용해 [행사명]의 단색 타이포그래피 포스터를 하나의 HTML 파일로 만들어 주세요.
실제 정보: 일시 [일시], 장소 [장소], 안내 [한 문장]. 연습용 정보라면 포스터 하단에 가상 행사라고 표시하세요.
읽는 순서는 행사명 → 날짜·시간 → 장소 → 안내입니다. 문구는 배열 데이터로 분리하고 제목 길이가 늘어나도 내용을 자르지 마세요.
단색 배경·글자·도형만 사용하고 CSS·SVG·Canvas 그라디언트, 외부 이미지, 외부 글꼴은 사용하지 마세요.
넓은 화면은 12열, 작은 화면은 6열 격자를 사용하되 제목과 필수 정보가 겹치지 않게 배치하세요. 제목 크기는 최소 가독성을 지키고, 더 길어지면 줄바꿈이나 배치 변경으로 해결하세요.
이전·다음 구도와 격자 표시 버튼을 넣으세요. 같은 구도 번호로 돌아오면 같은 배치가 나타나고 행사 정보는 바뀌지 않아야 합니다. 자유 편집기와 이미지 다운로드 기능은 이번 범위에서 제외합니다.
인쇄 버튼은 브라우저 인쇄를 열고, 인쇄용 CSS에서는 조작 버튼을 숨기고 [종이 규격]의 안전 여백을 남기세요.
360px 화면, 긴 한글 제목, 안내 문구 없음, 인쇄 미리보기의 확인 절차를 함께 설명하세요.

03만들고 다듬는 순서

  1. 포스터에 남길 문구부터 줄입니다

    행사 정보를 모두 넣었더니 제목이 너무 작아졌다면, 안내 문구부터 줄여 보세요. 가상 행사 ‘동네 작업실 열린 날’이라면 날짜·시간·장소를 남기고 안내는 한 문장으로 좁힙니다. 제목에서 행사의 성격이 읽히는지 본 뒤, 더 긴 프로그램 설명은 별도 안내 페이지로 옮기는 편이 낫습니다.

  2. 격자 위에 정보의 자리를 고정합니다

    처음부터 무작위 배치를 요청하지 말고 제목 구역, 날짜 구역, 장소 구역을 나눕니다. 도형은 빈 공간에 놓고 필수 정보와 겹치지 않게 합니다. 12열을 6열로 바꿀 때는 글자만 축소하는 대신 제목 아래에 날짜와 장소를 이어 놓도록 요청합니다.

  3. 긴 제목으로 글자의 한계를 확인합니다

    짧은 제목으로 완성한 뒤 ‘동네 작업실에서 함께 만드는 토요일 열린 날’처럼 긴 시험 문구로 바꿉니다. 읽기 어려울 정도로 축소되면 제목 영역을 넓히거나 두세 줄로 바꾸라고 요청합니다. 제목은 커도 장소와 시간은 누락되면 안 되므로 화면 아래까지 확인합니다.

  4. 구도 변경은 내용을 유지한 채 추가합니다

    처음 배치가 읽히면 이전·다음 구도를 넣습니다. 구도 번호는 배치의 기준값으로 사용하고, 이전 번호로 돌아왔을 때 같은 도형과 글자 자리가 나타나게 합니다. 누를 때마다 날짜나 장소가 달라지는 동작은 장식의 변화와 정보 변경을 혼동한 것이므로 분리합니다.

  5. 화면과 인쇄 결과를 따로 다듬습니다

    브라우저 인쇄 미리보기에서 조작 버튼이 사라지는지, 포스터가 두 장으로 나뉘지 않는지 확인합니다. 종이 크기와 프린터 여백이 달라지면 결과도 달라집니다. 검은 배경 구도가 화면에서는 읽혀도 잉크를 많이 쓰므로 흰 배경 인쇄 구도를 별도로 두는 선택을 할 수 있습니다.

04완성 전 체크

직접 확인한 항목만 체크하세요. 체크 상태는 저장되거나 서버로 전송되지 않습니다.

05막힐 때 확인할 것

한글 제목이 도형이나 날짜 위로 겹칩니다

글자 크기만 더 줄이지 말고 제목 구역의 열 수와 줄 수를 늘리도록 요청합니다. 날짜 구역을 제목 다음 행으로 옮기고, 겹침이 발생한 시험 문구와 화면 폭을 함께 전달하면 수정 범위를 좁힐 수 있습니다.

이전 구도를 눌러도 다른 포스터가 나타납니다

매번 새 난수를 만드는 방식 대신 구도 번호에서 같은 배치가 계산되도록 요청합니다. 문구 데이터와 배치 계산을 분리하고 이전·다음 버튼이 번호만 바꾸는지 확인합니다.

인쇄하면 버튼까지 나오거나 종이가 두 장으로 나뉩니다

인쇄용 CSS에서 조작 영역을 숨기고 화면용 최소 높이·큰 여백을 해제하도록 요청합니다. 인쇄 미리보기의 용지 크기와 배율을 먼저 맞춘 뒤 페이지 나눔을 확인합니다.

06출처와 참고 자료

아래 공개 사례는 주제의 참고 자료입니다. 이 글의 도구 선택·절차·프롬프트는 AI Tools Lab의 독립적인 편집 예시이며, 원 제작자의 실제 입력이나 실행 재현 기록이 아닙니다.

RASTER의 격자 기반 포스터 사례를 참고해, 행사 정보의 읽는 순서와 한글·인쇄 확인을 중심으로 새로 구성했습니다. 원작의 구도나 문구를 복제하는 안내는 아닙니다.