서론 Unity + WebGL로 운영 중인 한컴타자 ‘필사’ 서비스를 React/Next로 마이그레이션하는 일을 맡았습니다. 문제는 제가 C#/Unity 경험이 없는 프론트엔드 개발자라는 점이었습니다. 옮겨야 할 코드를 온전히 이해할 수 없는 상태에서 시작한 것입니다. 이 글은 그 문제를 AI로 어떻게 풀었는지의 기록입니다. 단순히 AI로 코드를 생성한 이야기가 아니라, 온전히 이해하지 못하는 코드의 ‘번역’을 AI에게 맡기고, 그 결과를 개발자가 …
Unity를 모르는 프론트엔드 개발자가 AI로 Unity 서비스를 React로 옮긴 방법 더 보기 »
||
요약
이 글은 C#/Unity 경험이 없는 프론트엔드 개발자가 운영 중인 Unity 서비스를 React/Next로 마이그레이션하며, “검증 지점을 코드에서 자연어 명세로 옮긴다”는 발상을 바탕으로 AI 협업 흐름 전체를 설계한 과정을 다룹니다. 특히 읽지 못하는 원본 코드를 AI가 ‘관측 가능한 동작’ 중심의 명세로 번역하고, 그 명세를 구현·검증·리뷰가 참조하는 단일 기준으로 삼는 하네스 엔지니어링 접근을 설명합니다. 또한 iOS Safari의 한글 IME 이슈 사례를 통해 AI가 제시하는 ‘가장 흔한 정답’이 내 상황에 맞는지는 개발자가 판단해야 함을 보여주고, 단락 단위 가상 스크롤 전환 과정에서 AI를 “가설을 싸게 만들고 빠르게 버리는” 도구로 활용하는 구체적인 방법을 다룹니다. 나아가 hook 기반 자동 안전장치와 도메인별 AI 리뷰어 분리, 그리고 자율성을 의도적으로 제한한 트레이드오프 판단까지, 정확성이 중요한 마이그레이션 작업에서 AI에게 어디까지 맡길지 정하는 판단력을 실무적 관점에서 살펴보는 글입니다.
서론
Unity + WebGL로 운영 중인 한컴타자 ‘필사’ 서비스를 React/Next로 마이그레이션하는 일을 맡았습니다. 문제는 제가 C#/Unity 경험이 없는 프론트엔드 개발자라는 점이었습니다. 옮겨야 할 코드를 온전히 이해할 수 없는 상태에서 시작한 것입니다. 이 글은 그 문제를 AI로 어떻게 풀었는지의 기록입니다. 단순히 AI로 코드를 생성한 이야기가 아니라, 온전히 이해하지 못하는 코드의 ‘번역’을 AI에게 맡기고, 그 결과를 개발자가 검증하는 흐름을 설계한 이야기입니다.
배경
한컴타자 필사는 Unity로 운영 중인 타이핑 학습 서비스입니다. 저는 이 서비스를 React/Next로 마이그레이션하면서, 모바일 대응과 페이지 단위 → 스크롤 기반 UX 전환 같은 신규 기능까지 얹는 작업을 진행했습니다.
기존 서비스는 콘텐츠를 페이지 단위로 직접 잘라 JSON으로 등록하는 구조였습니다. 챕터 > 페이지 > 텍스트 구조로, 한 페이지에 들어갈 분량을 관리자가 손으로 나눠 넣는 방식이었죠.
{
"document": {
"title": "...",
"chapters": [
{
"title": "1장",
"pages": [
{ "pageEffect": 0, "text": "첫 페이지 본문…", "marker": [] },
{ "pageEffect": 0, "text": "둘째 페이지 본문…", "marker": [] }
]
}
]
}
}
이번 마이그레이션에서는 txt·epub 파일을 그대로 업로드하면 되도록 바꿔, 페이지를 일일이 나누는 수작업을 없앴습니다. 그러자 페이지로 나눌 이유가 사라졌고, 책 전체를 한 번에 스크롤로 보여주는 방식으로 전환할 수 있었습니다. (스크롤 전환이 기술적으로 가능한지 먼저 검증한 뒤 반영했습니다.)
AI로 생성한 이미지
여기서 두 가지 어려움이 있었습니다.
원본 코드를 온전히 이해할 수 없었습니다. 뭘 유지하고 뭘 바꿀지 판단하려면 먼저 원본이 정확히 뭘 하는지 알아야 하는데, C#/Unity 경험이 없어 그 코드를 제대로 파악할 수가 없었습