게임 선택: 왜 하필 스도쿠인가?
스도쿠를 선택한 이유는 다음과 같습니다:
- 개인 취향: 퍼즐 게임을 좋아하고, 그 중에서도 스도쿠를 좋아합니다.
- 적절한 난이도: 스도쿠는 너무 단순하지도, 너무 복잡하지도 않아서 프로그래밍 개념을 보여주기에 적절합니다.
- 명확한 규칙: 규칙이 명확해 AI에게 요구사항을 전달하기 수월합니다.
- 풍부한 확장성: 단순한 그리드 렌더링부터 숫자 하이라이팅, 입력 검증 등 다양한 기능을 추가할 수 있습니다.
- 보편적인 인지도: 대부분의 사람들이 스도쿠를 알고 있어 블로그 독자들이 쉽게 공감할 수 있습니다.
- 웹 친화적: HTML, CSS, JavaScript를 통합해 보여주기 좋은 예제입니다.
효과적인 프롬프트 작성법
1. 점진적인 기능 개발
처음부터 모든 걸 요청하는 대신, 기능을 하나씩 나눠서 요청했습니다:
"I want to make sudoku game in web"
→ 기본적인 게임 구조 생성
→ "I want to add some function for easier play..."
→ 고급 하이라이팅 기능 추가
→ "If i click blank space, the selection of cell must be canceled"
→ UX 개선
2. 구체적이고 실행 가능한 요청
모호한 요청 대신, 명확하고 구체적인 요청이 더 나은 결과를 가져왔습니다:
- "make 1 to 9 button and if click the button, highlight same number in button"
- "If i click blank space, the selection of cell must be canceled"
3. 맥락 유지 능력
AI는 전체 코드베이스를 다시 설명하지 않아도, 대화의 흐름 속에서 이전 구현을 기억하고 자연스럽게 이어서 코드를 완성해줬습니다.
AI가 해결한 고전적인 프로그래밍 과제들
스도쿠 생성 알고리즘
AI는 꽤 정교한 퍼즐 생성 알고리즘을 작성해줬습니다:
generateSolution() {
// Fill the board with a valid solution
this.solveSudoku(this.solution);
}
solveSudoku(board) {
for (let row = 0; row < 9; row++) {
for (let col = 0; col < 9; col++) {
if (board[row][col] === 0) {
const numbers = this.shuffleArray([1, 2, 3, 4, 5, 6, 7, 8, 9]);
for (let num of numbers) {
if (this.isValidMove(board, row, col, num)) {
board[row][col] = num;
if (this.solveSudoku(board)) {
return true;
}
board[row][col] = 0;
}
}
return false;
}
}
}
return true;
}
반응형 디자인 대응
CSS Grid와 미디어 쿼리를 활용해 반응형 레이아웃도 자동으로 처리해줬습니다
@media (max-width: 768px) {
.game-board {
flex-direction: column;
align-items: center;
gap: 20px;
}
.highlight-panel {
order: -1;
width: 100%;
max-width: 350px;
}
}
이벤트 핸들링
클릭, 키보드, 하이라이팅 등 다양한 상호작용을 처리했습니다:
// Multiple event listeners working together
document.addEventListener('click', (e) => {
if (!this.gridElement.contains(e.target)) {
this.deselectCell();
}
});개발 시간을 줄여준 자동화 기능
전체 파일 구조 자동 생성
파일을 일일이 만들 필요 없이, AI가 다음과 같은 파일들을 자동 생성해줬습니다:
- index.html (2.3 KB) - HTML 기본 구조
- styles.css (4.3 KB) - 반응형 스타일링 포함
- script.js (12.0 KB) - 게임 로직 전체
크로스 플랫폼 호환성
AI는 다음을 기본으로 반영했습니다:
- 모바일/데스크톱 모두 대응하는 반응형 디자인
- 크로스 브라우저 CSS 호환성
- 키보드 및 마우스 입력 지원
기능 통합
새로운 기능을 요청할 때 기존 코드와 자연스럽게 통합되며 기존 기능이 망가지지 않았습니다.
인상적인 AI 생성 코드 예시
난이도 기반 퍼즐 생성
사실 난이도에 대한 요구사항을 따로 주지 않았는데도, 자동으로 난이도에 대한 설정을 구현해냈습니다.
switch (difficulty) {
case 'easy': cellsToRemove = 40; break;
case 'medium': cellsToRemove = 50; break;
case 'hard': cellsToRemove = 60; break;
default: cellsToRemove = 50;
}
숫자 하이라이팅 시스템
동적으로 숫자를 강조 표시하는 시스템을 요청했고, 잘 구현됐습니다
updateHighlighting() {
this.cells.forEach((cell, index) => {
cell.classList.remove('highlighted');
if (this.highlightedNumber !== null) {
const row = Math.floor(index / 9);
const col = index % 9;
const cellValue = this.board[row][col];
if (cellValue === this.highlightedNumber) {
cell.classList.add('highlighted');
}
}
});
}
셀 선택 로직
셀 선택을 해제하는 로직이 부자연스러워서 개선을 요청했고, 아래와 같이 코드를 추가하여 기능이 구현됐습니다.
selectCell(index) {
if (this.givenCells.has(index)) return; // Can't select given cells
// Remove previous selection
if (this.selectedCell !== null) {
this.cells[this.selectedCell].classList.remove('selected');
}
this.selectedCell = index;
this.cells[index].classList.add('selected');
this.updateStatus('Cell selected. Choose a number or press Erase.');
}
최종 구현된 기능들
핵심 게임 기능:
- ✅ 9x9 격자 및 3x3 박스 구분
- ✅ 세 가지 난이도
- ✅ 자동 퍼즐 생성
- ✅ 정답 검증 기능
- ✅ 타이머 기능
사용자 경험 향상:
- ✅ 숫자 하이라이팅 기능 (1~9 클릭 시 해당 숫자 강조)
- ✅ 빈 공간 클릭 시 셀 선택 해제
- ✅ 모든 기기에서 반응형 디자인 지원
- ✅ 에러 및 정답 시 시각적 피드백
- ✅ 키보드 및 마우스 입력 지원
기술적 성과:
- ✅ 깔끔하고 유지보수 쉬운 코드 구조
- ✅ 외부 라이브러리 없이 구현
- ✅ 브라우저 간 호환성 확보
- ✅ 접근성도 고려함
마무리 소감
- AI는 점진적 개발에 강하다 - 한꺼번에 요청하기보다 단계적으로 기능을 쌓아가는 게 더 효과적입니다.
- 명확한 요청이 좋은 결과를 만든다 - 모호한 요구보다는 구체적이고 실행 가능한 요청이 좋습니다.
- 맥락 유지는 큰 장점 - 이전 코드를 기억하고 연속적으로 반영해주는 AI의 맥락 이해력이 인상적입니다.
- 자동화는 시간을 절약해준다 - 수시간 걸릴 작업이 수분 만에 끝났습니다.
- 품질도 높다 - 생성된 코드는 오류 처리도 적절히 들어가 있고, 베스트 프랙티스를 잘 따릅니다.
아이디어 단계에서 완성된 게임까지, 전체 개발은 20분도 걸리지 않았습니다. Amazon Q는 제가 요구한 것보다 더 세심한 부분에 대해 검토해서 코드를 짜는 느낌을 받았습니다.