오픈 미션의 주제를 고민하던 중, 3년 전부터 즐겨 하던 '체스'가 떠올랐습니다. 사실 처음에는 주제 선정에 막막함을 느꼈습니다. 하지만 곰곰이 생각해보니, 체스야말로 우아한 테크코스 1~3주차에서 학습한 MVC 패턴과 TDD를 적용하기에 최적의 소재라는 확신이 들었습니다. 보드, 기물, 규칙 등 각 요소의 역할이 명확하여 객체지향적으로 풀어내기 딱 좋은 주제였기 때문입니다.
하지만 단순히 '체스 게임'을 만드는 건 너무 흔하고, 제한된 시간 안에 모든 규칙(프로모션, 캐슬링 등)을 완벽히 구현하기엔 무리가 있다고 판단했습니다. 그래서 "체스를 잘 모르는 입문자들도 메이트 패턴을 쉽게 익힐 수 있는 퀴즈"로 방향을 좁혔습니다. 평소 체스를 즐기며 느꼈던 진입 장벽을 낮춰보고 싶다는 개인적인 바람이 있었기 때문입니다.
그러나 '플레이하는 체스'와 '구현하는 체스'는 차원이 달랐습니다. 겉보기엔 단순한 8x8 격자 게임 같았지만, 내부 로직을 파고들수록 신경 써야 할 디테일이 산더미였습니다.
특히 FEN 표기법을 파싱하고 데이터를 구조화하는 과정에서 많은 시간을 쏟았습니다. 기보 표기법이나 규칙 등 평소 게임할 땐 무심코 넘겼던 부분들을 로직으로 변환하기 위해 관련 문서를 수없이 찾아봐야 했습니다. 하지만 이 과정 덕분에 Board와 ChessManager라는 핵심 모델을 설계할 때, 데이터와 책임의 경계를 더욱 명확히 할 수 있었습니다.
구현이 진행될수록 프로젝트에서 각 기물이 각자의 이동 규칙을 책임지고, Board는 상태만 관리하는 구조는 객체지향 프로그래밍(OOP)의 역할 수행하는 모습을 볼 수 있었습니다.
기존 코드를 리팩토링하며 FenConverter나 coordinate 같은 유틸리티를 분리하고, PieceFactory를 구현했습니다. 1~3주차 미션에서 배운 단일 책임 원칙(SRP)이 이론이 유틸리티를 분리하는 데 큰 도움을 주었습니다. 각 클래스가 본인의 역할만 충실히 수행하도록 만드니, 머릿속에 있던 복잡한 로직들이 깔끔하게 정리되었습니다.
순수 자바스크립트로 체스 엔진의 핵심 로직(getValidMoves, handleMove)을 모두 완성했습니다. 로직 구현까지는 자신 있었지만, 진짜 난관은 그다음이었습니다.
지금까지 우테코 미션에서는 Console View만 다뤘지만, 이번엔 사용자가 눈으로 보고 조작하는 웹 UI를 만들어야 했습니다. React로 UI를 구성하려니, 콘솔 창의 텍스트 입출력과는 다른 구조가 필요했습니다. 그런 막막함 속에서, MUI와 styled-components를 활용해 컴포넌트의 뼈대를 하나씩 세워나가기 시작했습니다.
사용자가 기물을 클릭하고 이동하는 인터렉션을 구현할 때도 어려움를 겪었습니다. 단순히 화면에 그리는 것을 넘어, 사용자의 동작(Input)을 ChessManager의 로직으로 전달하고, 다시 그 결과를 화면(Output)에 반영하는 데이터 흐름을 잡는 것이 중요했습니다. 기존 기획은 드래그 방식으로도 이동할 수 있게 하려고 했지만, 클릭 로직만으로 충분하고 시간적인 여유도 없었기 때문에 클릭으로 이동하는 방식만 구현하였다.
React의 useState와 useEffect를 사용해 단방향 데이터 흐름을 구축했습니다. 콘솔에서는 느낄 수 없었던, 시각적인 피드백이 보이는 것이 보람차기도 했습니다. 물론 그 과정에서 상태 동기화 문제로 기물이 엉뚱한 곳에 가기도 했지만, 이를 해결하며 프론트엔드 상태 관리의 중요성을 깊이 이해하게 되었습니다.
UI를 구현하면서 사용자 경험(UX)을 극대화하고 싶어 framer-motion과 같은 외부 라이브러리를 도입했습니다. 하지만 처음 써보는 라이브러리라 개념을 이해하는 데 꽤 애를 먹었습니다.
특히 Layout Animation을 적용해 기물이 부드럽게 이동하게 만드는 과정에서 코드를 수십 번 수정했습니다. 공식 문서, 기술 블로그, 유튜브 튜토리얼을 찾아보면서 개념을 익혔습니다. 기능 구현보다 사용자 경험에 시간을 너무 많이 쏟았나 싶기도 했지만, 결과적으로 딱딱하게 끊기던 기물이 물 흐르듯 움직이는 것을 보며 '사용자를 위한 디테일'의 가치를 배울 수 있었습니다.
프로젝트의 마지막은 초심으로 돌아가 TDD(테스트 주도 개발)를 실천했습니다. UI 구현에 치여 잠시 미뤄뒀던 테스트 코드를 vitest 를 사용하여 작성하였습니다.