만들기 기록
행사 포스터 AI로 만들기 — 시안 세 가지 비교 (바이브코딩 #11)
게임 제작 행사 마지막 날을 알릴 포스터가 필요했습니다. 시상식과 게임대회를 함께 안내하고, 선정된 게임 세 개와 참가 선물도 보여줘야 했습니다. 날짜와 장소만 크게 적는 것으로는 행사에서 무엇을 하는지 설명하기 어려웠습니다.
게임 느낌으로 만들어보되, 처음부터 한 가지 모양으로 정하지 않고 두세 가지 시안을 보고 고르기로 했습니다. AI와 만든 첫 결과는 브라우저로 열어 보는 HTML 포스터 세 장이었습니다. 같은 행사 정보를 넣고 배경과 글자, 카드 모양을 다르게 만들었습니다.
아래는 당시 HTML 시안에 가상 행사 정보를 넣어 다시 띄운 화면입니다. 실제 이름과 기관 정보는 바꾸고, 참가자 작품 사진과 로고는 뺐습니다. 회색 칸은 게임 사진이 들어갈 자리이며, 현재 모집 중인 행사 안내는 아닙니다.
행사 내용은 같게 두고 세 가지로 만들기
포스터에 들어갈 재료는 행사명, 일시와 장소, 참여 대상, 게임별 소개, 시상과 선물 안내였습니다. 게임 소개는 사진·작품명·만든 사람·짧은 설명을 한 카드로 묶고, 카드 세 개를 나란히 놓았습니다. 시안마다 내용을 새로 쓰지 않고 같은 내용을 넣어 비교했습니다.
첫 번째는 밝은 게임 로비 느낌입니다. 하늘과 잔디를 배경으로 쓰고, 흰 카드에 게임을 소개했습니다. 날짜는 빨간 바탕에 따로 올렸습니다.
두 번째는 어두운 아케이드 느낌입니다. 짙은 남색 바탕에 청록색과 분홍색을 쓰고, 게임 카드 테두리와 날짜에 색을 넣었습니다. 첫 번째와 정보 위치는 비슷하지만 배경과 글자의 대비가 달라집니다.
세 번째는 위쪽을 빨간 블록처럼 만든 시안입니다. 큰 제목은 빨간 영역에, 게임 소개는 아래쪽 밝은 영역에 두었습니다. 행사 제목과 상세 내용을 배경색으로 나누는 구성입니다.
제목 아래 문장이 가려져서 다시 조정하기
세 번째 시안은 위쪽의 빨간 영역 때문에 제목 아래 안내 문구가 묻히는 문제가 있었습니다. 빨간 영역의 높이를 285픽셀로 줄여 문구가 아래쪽에서 보이도록 고쳤습니다. 첫 번째 시안에서는 구름 위치를 옮겼고, 세 장 모두 하단 여백과 로고 크기, 문의 안내를 손봤습니다.
행사에 들어가는 정보도 확인했습니다. 시간은 처음 이야기한 내용과 공지에 적힌 내용이 달라 공지를 기준으로 맞췄습니다. 선정된 게임을 소개하되 순위는 포스터에 넣지 않기로 했습니다. 시상식 전에 결과를 먼저 알리지 않으려는 결정이었습니다.
이번 공개 예시도 브라우저에서 한 장씩 다시 열어 확인했습니다. 원본과 같은 794×1123픽셀의 세로 화면이고, 글자와 하단 안내가 잘리지 않는지 살폈습니다. 실제 참가자 사진을 넣었던 자리는 비워뒀기 때문에 사진까지 들어간 원본의 인상과는 차이가 있습니다.
HTML 시안과 이미지 포스터는 다른 결과물이었다
세 시안을 만든 뒤에는 방향을 바꿨습니다. 원했던 것은 HTML/CSS로 배치한 포스터보다 이미지 생성으로 만든 포스터였습니다. 그래서 HTML 세 장은 배치와 문구를 참고하는 자료로 남기고, 같은 세 방향의 이미지 생성 요청문을 따로 정리했습니다.
그 요청문에는 배경 분위기와 들어갈 문구, 참고 이미지의 역할을 나눠 적었습니다. 로고는 생성 과정에서 모양이 바뀌지 않도록 자리를 비워두고 원본을 나중에 넣는 계획이었습니다. 다만 보관된 기록에서 확인되는 것은 HTML 시안과 요청문까지입니다. 최종 생성 이미지나 어떤 시안을 선택해 실제 홍보에 썼는지는 확인하지 못했습니다.
압축을 풀고 HTML 파일을 브라우저로 열면 위 예시를 볼 수 있습니다. 글꼴은 인터넷에서 불러오므로 연결되지 않으면 다른 글꼴로 보일 수 있습니다. 파일 안의 문구를 수정하는 방식이며, 화면에서 글자를 클릭해 고치는 편집기나 이미지 생성 기능은 없습니다.
첨부한 파일은 배치 비교용입니다. 실제 행사에 쓰려면 가상 문구를 확정 정보로 바꾸고, 사용 가능한 사진과 신청 방법을 넣어야 합니다. A4 비율로 만들었지만 실물 인쇄 결과까지 확인한 것은 아닙니다.
작은 시도에서 시작하는 다음 점프.