프롬프트

색색의 네모(으)로 채울 수 있는 12 x 12 그리드의 이모지 모자이크 제작기를 만들어 주세요. 추가 설치 없이 다른 파일도 전혀 필요 없이, 브라우저에서 바로 열리는 HTML 파일 하나로 만들어 주세요. CSS와 자바스크립트는 파일 안에 직접 넣어 주세요. 이미지 파일이나 어떤 외부 주소도 쓰지 마세요. 기호가 필요하다면 이모지나 글자를 쓰세요.

팔레트에서 이모지를 고른 뒤 그리드를 클릭하거나 드래그해서 배치할 수 있게 해 주세요. 마우스 오른쪽 버튼을 누르면 칸이 지워집니다.

핵심은 결과물이 텍스트 형태라는 점입니다. 메시지에 바로 붙여넣을 수 있도록 그리드 전체를 이모지 줄글 형태로 복사하는 복사 버튼을 만들어 주세요. 그 텍스트가 어떻게 보이는지 아래쪽 상자에 보여주세요.

빈 네모만 덩그러니 있는 대신 수정해 볼 수 있는 밑바탕이 있도록, 선택 시 그리드를 채워 주는 기본 패턴(하트, 스마일리, 단순한 꽃 등)을 코드 안에 10여 개 정도 넣어 두세요.

작업이 끝나면 결과물을 복사해서 다른 글꼴을 쓰는 곳에 붙여넣었을 때도 줄이 흐트러지지 않고 반듯하게 맞는지 확인해 주세요.