Claude를 활용한 맞춤형 Wordle 패턴 생성기 'WordleCraft' 제작기

실용적 조언

실행 취소 기능을 구현할 때 복잡한 상태 관리 라이브러리 대신 JSON.stringify 스택 방식을 고려해 보라.
색약 모드 구현 시 색상 변경뿐만 아니라 CSS 도형을 추가하여 정보 전달력을 높이는 것이 좋다.

섹션별 상세

Claude를 활용한 반복적 개발 워크플로우를 정립했다. 자연어로 기능을 설명하면 Claude가 초안 코드를 작성하고, 개발자가 이를 검토 및 테스트한 뒤 엣지 케이스(그리드 외부 마우스 해제 등)를 수정하는 방식으로 진행했다. 특히 네오브루탈리즘 스타일의 CSS 디자인 시스템을 구축할 때 Claude의 생성 능력을 적극 활용하여 시각적 완성도를 높였다.

드래그 앤 드롭 방식의 타일 페인팅 시스템을 이벤트 기반으로 구현했다. mousedown 시 목표 색상을 고정하고 dragging 플래그를 활성화하며, mouseenter 시 해당 플래그가 true인 타일들을 색칠하는 구조이다. 문서 전체에 mouseup 리스너를 배치하여 마우스가 그리드 밖에서 해제되더라도 플래그가 정상적으로 리셋되도록 설계하여 사용자 경험을 개선했다.

javascript

onmousedown = (e) => { 
  dragging = true; 
  targetColor = cycleColor(e.target);
}
onmouseenter = (e) => { 
  if (dragging) paintTile(e.target, targetColor);
}
document.onmouseup = () => { dragging = false; }

마우스 드래그를 통해 여러 타일을 한 번에 색칠하는 로직 구현 예시

상태 관리를 위해 JSON 스냅샷 기반의 실행 취소(Undo) 기능을 도입했다. 그리드의 현재 상태를 JSON.stringify로 직렬화하여 스택에 저장하고, 복구 시 JSON.parse로 역직렬화하여 상태를 덮어씌우는 방식이다. 최대 50개의 스냅샷을 유지하도록 제한하여 메모리 효율성을 확보하면서도 복잡한 프레임워크 없이 강력한 편집 기능을 제공한다.

javascript

undoStack.push(JSON.stringify(grid));
// ... change happens ...
grid = JSON.parse(undoStack.pop());

JSON 직렬화를 이용한 간단한 실행 취소(Undo) 시스템 구현 방식

색약 사용자를 위한 접근성 모드를 CSS 가상 요소를 통해 구현했다. 단순히 색상을 바꾸는 대신 ::after 의사 요소를 사용하여 회색은 원형, 노란색은 다이아몬드, 초록색은 삼각형 모양을 추가했다. 자바스크립트 재렌더링 없이 최상위 클래스 토글만으로 시각적 형태를 변경하여 성능 저하 없는 접근성을 실현했다.

용어 해설

네오브루탈리즘(Neobrutalism): — 강렬한 색상, 굵은 테두리, 그림자 효과를 강조하는 웹 디자인 스타일입니다. 현대적인 UI 요소와 고전적인 브루탈리즘의 투박함을 결합하여 시각적 대비를 극대화하고 사용자에게 강한 인상을 남기는 데 사용됩니다.
가상 요소(Pseudo-elements): — HTML 문서의 특정 부분에 스타일을 입히기 위해 CSS에서 사용하는 키워드입니다. ::after나 ::before를 통해 실제 DOM 구조를 변경하지 않고도 아이콘이나 도형 같은 시각적 요소를 추가할 수 있어 성능 효율적입니다.
실행 취소/다시 실행 스냅샷(Undo/Redo Snapshot): — 애플리케이션의 특정 시점 상태를 데이터 객체로 저장하여 이전 상태로 복구하는 기법입니다. JSON.stringify를 통해 현재 그리드 상태를 문자열로 직렬화하여 스택에 쌓고, 필요 시 역직렬화하여 상태를 즉각 복원합니다.

언급된 도구

Claude추천

코딩 파트너 및 CSS 디자인 생성

Vanilla JavaScript추천

프레임워크 없는 프론트엔드 로직 구현

언급된 리소스

DemoWordleCraft Live

GitHubWordleCraft GitHub Repository