이메일로 플레이하는 클래식 커넥트 4 게임 개발기: API, 백엔드 및 프론트엔드 구현

핵심 기술: 이 글은 이메일만을 사용하여 클래식 게임인 커넥트 4를 구현한 흥미로운 프로젝트를 소개합니다. Express.js와 MongoDB를 백엔드로 사용하고, Postmark를 통해 이메일 파싱을 처리하며, 게임 보드 렌더링을 위해 Puppeteer를 활용하는 전반적인 개발 과정을 다룹니다.

기술적 세부사항:

• 프로젝트 개요: 이메일만이 유일한 통신 수단인 '이메일 세계관'에서 커넥트 4 게임을 구현했습니다.
• 기술 스택: 백엔드는 Express.js와 MongoDB를 사용했으며, 이메일 처리를 위해 Postmark를 활용했습니다.
• 게임 흐름: 사용자는 웹사이트에서 게임을 시작하고, API 요청을 통해 백엔드에 게임이 생성됩니다. 첫 플레이어는 이메일로 요청을 받고 응답하며, Postmark의 StrippedTextReply 필드를 통해 명령을 파싱합니다. 잘못된 응답 시에는 재요청 이메일을 보냅니다.
• 상태 관리: 백엔드는 각 게임의 플레이어 이메일, 다음 이동 플레이어, 게임 보드 상태를 저장하고 관리합니다.
• 이메일 알림: 상대방의 차례를 알리거나 게임 종료(승리 또는 무승부) 시 이메일을 발송합니다.
• 보드 렌더링: Puppeteer를 사용하여 이메일 내에 표시될 게임 보드를 동적으로 생성하고 스크린샷으로 만듭니다.
• 배포: Docker를 사용하여 애플리케이션을 컨테이너화하고, DigitalOcean App Platform에 배포하여 문제를 해결했습니다.
• Gmail 호환성 문제 해결: Gmail에서 발신자 이름이 이메일 주소로 표시되는 문제를 인지하고, 응답 시 올바른 이메일 주소로 보내도록 안내 문구를 추가했습니다.
• Postmark 대시보드 버그: 웹훅 URL이 이전 값으로 유지되는 버그를 발견했지만, 페이지 새로고침으로 해결할 수 있었습니다.

개발 임팩트: 이 프로젝트는 이메일이라는 전통적인 매체를 통해 복잡한 인터랙티브 경험을 구현하는 창의적인 방법을 보여줍니다. 백엔드 로직, 데이터베이스 관리, 외부 서비스(이메일 API) 연동, 동적 콘텐츠 생성 및 배포 등 다양한 개발 경험을 쌓을 수 있습니다.

커뮤니티 반응: 개발자는 이 프로젝트가 재미있었으며, 특히 Postmark와 DEV.to 팀에게 감사를 표하고 피드백을 환영한다고 밝혔습니다. (이 부분은 원문에서 직접적인 커뮤니티 반응보다는 개발자의 소감에 해당합니다.)