<aside> 📌
이 페이지는 슈크림 짝꿍 찾기 게임을 Notion AI(요약슈)와 대화하며 만든 전체 기록이에요. 순서대로 따라 하면 누구나 자신만의 메모리 카드 게임을 만들 수 있어요.
파란색 = 내가 한 말, 주황색 = AI가 한 말 로 구분했습니다.
</aside>
<aside> 🙋
나 — 이번에 새로 나온 HTML 블록을 활용해서 간단한 게임을 만들고 싶어. 어떤 게 가능한지 리스트업해줘.
</aside>
<aside> 🤖
요약슈 — HTML 블록으로 만들 수 있는 간단한 게임들을 정리해드렸어요: 메모리(짝 맞추기) 카드, OX·객관식 퀴즈, 틱택토, 반응속도 테스트, 슬라이딩 퍼즐, 단어 맞추기 등.
</aside>
<aside> 🙋
나 — 메모리 카드 하고 싶은데, 카드 이미지를 내가 원하는 걸로 넣고 싶어. 게임을 만들기 위해 필요한 것들을 단계별로 설명하고, 내가 너에게 줘야 하는 정보를 알려줘.
</aside>
<aside> 🤖
요약슈 — 만드는 순서와 제가 필요한 정보를 정리해드렸어요.
<aside> 🙋
나 — 단계별로 1단계(4장)→2단계(6장)→…처럼 카드가 점점 늘어나고, 총 7단계. 제한시간은 없지만 1~7단계 총 걸린 시간이 랭킹에 반영되는 구조. 카드 뒤집기 애니메이션 필요!
</aside>
<aside> 🤖
요약슈 — 규격을 확인하고, 총 소요시간 랭킹은 브라우저에 저장하는 방식으로 구현 가능하다고 안내드렸어요. 이제 카드 이미지가 필요하다고 요청했습니다.
</aside>
<aside> 🙋
나 — 외부 URL을 주는 방법을 몰라. 어디에 올려서 어떻게 줘야 해?
</aside>
<aside> 🤖
요약슈 — 외부 사이트에 올릴 필요 없이, 그냥 Notion 페이지에 이미지를 붙여넣으면 제가 거기서 직접 가져올 수 있다고 알려드렸어요.
</aside>
<aside> 🙋
나 — 이미지 사이즈는 어느 정도가 최적이야? 가로세로 픽셀로 알려줘. 피그마로 만들 거야.
</aside>
<aside> 🤖
요약슈 — 카드가 정사각형이라 1:1 비율을 추천했어요. 선명하게 하려면 600×600px 정도면 충분하고, 실제 게임에 넣을 땐 약 300px로 리사이즈해 용량을 최적화한다고 안내했습니다.
</aside>
<aside> 🙋
나 — 이미지를 앞뒤 세트 맞춰서 페이지 안에 넣어둬도 돼? 이 채팅창에 안 주고?
</aside>
<aside> 🤖
요약슈 — 네! 별도 페이지에 이미지를 모아두면 제가 그 페이지에서 읽어온다고 확인해드렸어요. (그래서 이미지 페이지가 만들어졌습니다.)
</aside>