GPT 5.6 Sol로 플래시 웹 서비스를 복각하기
작성일 : 2026. 07. 27
TL;DR
- 2011년에 Flash로 만들었던
What's Your Korean Name을 현재 브라우저에서 동작하는 웹 서비스로 복각했습니다. - 원본 PSD, FLA, SWF, ActionScript, PHP와 각종 기획 자료의 분석부터 GPT 5.6 Sol에 맡겼습니다.
- 운영 DB는 유실됐지만 코드와 원본 엑셀, 배포 음원에 남은 정보를 조합해 서비스에 필요한 이름 데이터를 복원했습니다.
- 기능과 화면 구성은 초기 구현부터 체감상 90% 이상 완성돼 있었습니다. 이후에는 사람이 전체 흐름을 테스트하며 좌표, 연출 시간, 정적 문구 처리 같은 세부 사항을 조정했습니다.
- 완성본은 https://k-name.unk.io에서 확인할 수 있습니다.
복각 대상
What's Your Korean Name은 외국인에게 한국 이름을 지어주는 Facebook 캔버스 앱이었습니다. 2011년 말에 제작했고 Flash Player 10.2, ActionScript 3, PHP 5, MySQL로 구성했습니다.
사용자는 영문 성과 성별을 기준으로 한국 성씨를 받은 뒤 한자식 이름과 순우리말 이름 중 하나를 고릅니다. 원하는 뜻을 선택하면 이름 후보 다섯 개와 발음을 확인할 수 있고, 마지막에는 프로필 사진을 넣은 한국식 명함을 만들 수 있었습니다.
한국 이름을 만들어준다는 주제 때문에 외국인 사용자의 반응은 있었습니다. 하지만 당시 운영팀에는 글로벌 서비스를 운영한 경험이 부족했습니다. 7.4MB짜리 본편 SWF를 해외 사용자에게 안정적으로 전달할 구성도 없었습니다. 결국 긴 로딩시간에 대한 악플이 잔뜩 남아 아직도 전해지고 있습니다.. ㅎㅎ
Flash 지원이 끝나고 Facebook 플랫폼 정책도 바뀌면서 원본 서비스는 더 이상 실행할 수 없게 됐습니다. 이번 작업의 목표는 SWF를 그대로 재생하는 것이 아니라, 원래의 사용자 흐름과 화면을 현재 웹 기술로 다시 구현하는 것이었습니다.
남아 있던 자료
원본 저장소는 약 1.8GB였습니다. 다음 자료가 남아 있었습니다.
| 자료 | 내용 |
|---|---|
| PSD | 날짜별 디자인 원본 16개 |
| FLA | 본편, 인트로와 사운드 라이브러리 등 8개 |
| SWF | 배포본 3개 |
| 코드 | ActionScript 27개, PHP 공개 API와 관리자 코드 |
| 데이터 원천 | 이름 정리 엑셀, 번역본, 순우리말 이름 목록 |
| 미디어 | 이름 발음 MP3 400개, BGM, 효과음, 내레이션 |
반면 운영 DB 덤프는 없었습니다. Facebook 로그인과 공유 API도 현재는 그대로 사용할 수 없었습니다. 따라서 화면만 다시 만드는 작업으로 끝낼 수 없었고, 원본 분석과 데이터 복원, 폐지된 기능의 교체가 함께 필요했습니다.
PSD, FLA, SWF 분석
먼저 전체 원본을 GPT 5.6 Sol에 제공하고 서비스 구조와 자료 간 관계를 분석하게 했습니다. 모델은 파일 목록만 요약하지 않고 서로 다른 형식의 자료를 교차 확인했습니다.
PSD 분석에서는 여러개의 날짜별 파일을 레이어와 텍스트, 수정 시각 기준으로 비교했습니다. 최종 기준으로 정한 12월 13일 버전 PSD에는 레이어 646개와 텍스트 레이어 158개가 있었습니다. 모델은 그룹 구조를 화면별로 나누고 각 화면에 해당하는 제목, 버튼, 배경, 동적 텍스트를 구분했습니다.
FLA와 SWF도 분해해 내부 심볼, 프레임, 연결 클래스, 이미지와 사운드를 확인했습니다. PSD보다 나중에 수정된 FLA와 ActionScript가 있다는 점도 찾아냈습니다. 그래서 복원 기준은 PSD 한 파일이 아니라 1213 PSD의 디자인 + 이후 FLA와 ActionScript 수정으로 정했습니다.
SWF에서는 메인 스테이지가 760×600, 30fps라는 점과 문이 열리고 두루마리가 펼쳐지는 순서를 확인했습니다. 메인 타임라인만 보면 알 수 없는 중첩 스프라이트의 프레임과 ActionScript의 지연 시간을 함께 읽어 연출 시간을 재구성했습니다.
PSD의 레이어 단위 파싱과 화면 분석은 예상보다 정확했습니다. FLA와 SWF도 각각의 내부 구조를 해석한 뒤 코드와 연결해 실제 화면 명세로 정리했습니다. 이 분석을 바탕으로 만든 첫 웹 버전은 기능과 화면 구성 기준으로 체감상 90% 이상 완성된 상태였습니다. 이 수치는 별도 측정 지표가 아니라 초기 결과물을 직접 확인한 평가입니다.
유실된 데이터 복원
운영 DB는 없었지만 PHP와 ActionScript에는 테이블 구조와 조회 방식이 남아 있었습니다. 한자식 이름은 사용자가 고른 두 뜻을 기준으로 2개와 3개를 찾고, 순우리말 이름은 선택한 뜻에 맞는 후보 5개를 반환하는 방식이었습니다. 영문 성의 첫 글자 A~Z를 한국 성씨 26개에 연결하는 표도 코드에 있었습니다.
이 동작을 근거로 원본 엑셀과 배포 음원을 다시 조합했습니다. 발음 MP3 400개에는 CP949로 기록된 ID3 태그가 남아 있어 파일명과 한글 이름을 전부 연결할 수 있었습니다. 최종 결과는 다음과 같습니다.
| 구분 | 복원 결과 |
|---|---|
| 한자식 이름 | 282건 |
| 순우리말 이름 | 191건 |
| 전체 이름 | 473건 |
| 연결된 발음 MP3 | 400개 |
| 성씨 매핑 | A~Z 26종 |
성별 값과 일부 검색용 의미 분류는 원본 DB에만 있었던 것으로 보입니다. 이 값들은 원본의 정확한 복제가 아니라 코드에서 확인한 사용 방식, 남아 있는 뜻풀이, 공개 이름 통계를 근거로 다시 분류했습니다. 원본에서 직접 복원한 값과 새 서비스용으로 재생성한 값을 데이터와 문서에서 구분해 두었습니다.
새 버전은 별도 운영 DB 없이 확정된 JSON 사전과 API를 사용합니다. 참여자 정보도 저장하지 않습니다.
웹으로 다시 구현하기
새 버전은 Next.js와 React로 구현했습니다. 원본의 760×600 고정 스테이지를 유지하고 화면 크기에 맞춰 전체를 비율로 축소합니다. 화면 상태는 기존 ActionScript의 전역 상태 구조를 기준으로 옮겼고, 추천 로직은 테스트할 수 있는 순수 함수로 분리했습니다.
현재 환경에서 사용할 수 없는 기능은 다음과 같이 바꿨습니다.
| 원본 | 복각 버전 |
|---|---|
| Facebook 로그인과 프로필 조회 | 영문 성과 성별 직접 입력 |
| Facebook 프로필 사진 | 브라우저에서 로컬 사진 선택 |
| 담벼락 사진 게시와 친구 초대 | Web Share, X 공유, 링크 복사 |
| Flash PNGEncoder | Canvas 2D로 536×826 PNG 생성 |
| 서버 DB와 참여 기록 | 정적 JSON 사전, 사용자 정보 미저장 |
BGM, 효과음, 내레이션과 이름 발음도 다시 연결했습니다. UI 사운드 13개는 앱에 포함하고 이름 발음 400개는 별도 스토리지에서 제공합니다.
상용 서체가 적용된 정적 문구는 브라우저에서 다시 렌더하지 않고, 원본 PSD와 FLA에 포함된 이미지 에셋으로 교체했습니다. 이름과 뜻풀이처럼 사용자 선택에 따라 내용이 달라지는 영역은 정적 이미지 영역과 분리해 처리했습니다.
브라우저 자동화로 화면 확인
구현 후의 확인도 모델이 직접 수행했습니다. 브라우저 자동화를 이용해 로컬과 운영 화면을 열고 전체 흐름을 진행했습니다.
- 한자식 이름과 순우리말 이름 두 경로
- 각 화면의 이전·다음 이동과 선택 전후 상태
- 760×600 기준 화면과 원본 가이드의 좌표 비교
- 일반 모션과
prefers-reduced-motion - 390×844 세로 화면과 844×390 가로 화면의 축소 동작
- 사진 선택, 드래그, 두 가지 명함 스타일, 공유와 다운로드
- 생성된 536×826 PNG와 브라우저 콘솔 오류
최종 시각 검증에서는 공통 요소와 동적 텍스트의 위치를 원본 기준 ±2px 안으로 맞추는 목표를 사용했습니다. 기능 테스트, 타입 검사, 데이터 검증과 프로덕션 빌드도 함께 실행했습니다.
사람이 마무리한 부분
초기 결과물 이후 사람이 직접 전체 화면을 확인하면서 한 작업은 주로 미세 조정이었습니다. PSD와 최종 FLA가 다른 부분의 우선순위를 확인하고, 일부 좌표와 공개 시간을 수정했습니다.
초기 버전에서는 일부 제목과 설명을 브라우저 텍스트로 구현했습니다. 사람이 원본을 다시 확인한 뒤 상용 서체가 사용된 정적 문구는 PSD와 FLA에 남아 있는 이미지 에셋으로 교체했습니다. 이 과정에서 해당 영역은 별도 폰트 파일에 의존하지 않으면서 원본의 글자 형태와 배치를 그대로 유지할 수 있었습니다.
이름처럼 매번 내용이 바뀌는 텍스트는 정적 문구와 분리하고, 화면과 명함의 크기, 자간, 기준선을 다시 조정했습니다.
기능이나 화면 구조를 다시 작성할 정도의 수정은 필요하지 않았습니다. 원본 자료 분석과 초기 구현의 정확도가 높았기 때문에 사람의 검수는 정본 결정과 세부 조정에 집중할 수 있었습니다.
SWF 실행과 소스 기반 복각
현재는 SWF를 WebAssembly 기반 에뮬레이터로 브라우저에서 실행하는 방법도 많이 사용됩니다. 원본을 수정하지 않고 보존하거나 빠르게 다시 공개하는 것이 목적이라면 이 방식이 더 간단할 수 있습니다.
이번 프로젝트는 다음 이유로 소스 분석 기반 복각이 더 적합했습니다.
- Facebook API와 PHP 서버처럼 더 이상 동작하지 않는 의존성이 있었습니다.
- 운영 DB가 유실돼 데이터 계층을 다시 만들어야 했습니다.
- 로그인, 사진, 공유 기능을 현재 브라우저 기능으로 바꿔야 했습니다.
- 모바일 표시, 접근성, 보안 헤더와 배포 구조를 새로 적용해야 했습니다.
- 이후 기능 수정과 운영을 계속할 수 있는 코드가 필요했습니다.
PSD, FLA, SWF와 코드를 함께 분석하면 화면을 비슷하게 그리는 수준을 넘어 원래의 상태 전이, 연출 시간, 데이터 규칙까지 복원할 수 있습니다. 기존 SWF에 수정이 필요하거나 이후 버전을 계속 개발해야 한다면 이런 방식도 선택지가 될 수 있습니다.
직접 확인
복각한 서비스는 아래에서 테스트할 수 있습니다.
첫 화면에서 영문 성과 성별을 입력하면 이름 선택부터 명함 생성까지 전체 흐름을 확인할 수 있습니다. 입력한 정보와 사진은 서버에 저장하지 않습니다.
이 블로그는 댓글 기능이 없습니다.
이 게시물에 대한 의견이 있으시면 i.am@naram.kim 으로 메일을 남겨주세요.