WEBT 구축 사례: 이미지 HTML 변환을 위한 AI 홈페이지 제작 도구 개발

핵심 요약

1. 레퍼런스 웹사이트와 상세페이지 이미지를 수정 가능한 웹으로 재구성하는 제작 업무를 해결하고자 했습니다. 2. WEBT는 웹 소스 등록과 HTML 직접 편집, 객체 ID 기반 이미지 문서 편집, 프레임별 자체 검수와 내보내기 기능을 구축했습니다. 3. 사용자가 구성요소를 선택해 수정하고 저장한 결과를 웹 문서와 장면 데이터로 이어 갈 수 있도록 했습니다.

프로젝트 소개

WEBT는 트램스가 내부 프로젝트로 개발한 웹·이미지 편집 도구입니다. 레퍼런스 웹사이트와 상세페이지 이미지를 출발점으로, 내용을 다시 편집할 수 있는 홈페이지와 상세페이지를 만드는 것을 목표로 했습니다. 원본의 이용권한을 확보한 레퍼런스와 자체 소스를 대상으로 합니다.

웹 에이전시는 레퍼런스의 표현을 분석한 뒤 실제 제작에 필요한 구조로 옮겨야 합니다. 커머스 솔루션 사업자는 상세페이지의 문구와 이미지를 바꾸는 편집 기능까지 제품에 담아야 합니다. WEBT의 AI 홈페이지 제작 도구 개발은 이러한 재구성과 후속 편집을 연결하는 데 초점을 맞췄습니다.

여기서 클로닝은 웹페이지의 구조와 표현을 분석해 다시 구성하는 작업을 뜻합니다. 외부 AI 기능을 연결하는 API를 활용해 웹과 이미지를 편집 가능한 문서로 재구성하는 것이 개발 목표였습니다. 이 글에는 ARBOR 웹사이트를 불러온 실제 편집·미리보기 화면 2장과, 기존 UI를 바탕으로 가상 브랜드를 배치해 AI로 재구성한 데모 이미지 3장을 사용했습니다.

웹사이트 구조 재구성: HTML 요소와 Three.js·WebGL 장면 구분

웹사이트 재구성에서 먼저 풀어야 할 문제는 화면을 이루는 요소의 성격을 구분하는 일이었습니다. 제목과 이미지처럼 문서 구조에 속하는 요소와, 시간에 따라 움직이는 그래픽 장면은 수정 대상과 비교 기준이 다릅니다. WEBT는 이러한 고난도 웹페이지를 다루기 위해 구조화된 분석을 개발 방식으로 삼았습니다.

실제 웹 편집 흐름에는 웹 소스를 묶은 ZIP 파일의 등록과 검사, 가져오기 처리 목록 등록을 구현했습니다. 사용자는 저장된 프로젝트를 카드 목록에서 찾아 편집을 이어 갈 수 있습니다. 입력한 소스의 지원 범위를 확인하고 작업 대상을 선택하도록 구성한 흐름입니다.

편집 단계에서는 페이지 안의 제목을 선택하고 문구·글꼴·크기를 조정하도록 했습니다. HTML은 제목과 이미지 같은 문서 요소를 표현하고, CSS는 그 요소의 글꼴과 배치 같은 모양을 지정합니다. 선택한 요소에 편집값을 연결하고 미리보기 후보를 확인한 뒤 저장하는 방식입니다.

한편 개발 목표에는 Three.js·WebGL을 이용한 웹페이지의 재구성이 포함됐습니다. Three.js는 물체와 카메라, 장면을 구성해 3D 화면을 그리는 자바스크립트 라이브러리입니다. 물체의 위치와 카메라의 시점 등을 장면 단위로 다룰 수 있습니다.

WebGL은 브라우저의 캔버스 영역에 2D·3D 그래픽을 그리는 API입니다. 그래픽 처리 기능을 이용해 장면을 표시하므로, 문서 안의 제목을 바꾸는 작업과는 분석 단위가 다릅니다.

유사 도구를 새로 설계한다면 DOM, 즉 웹 문서의 요소 구조와 캔버스 장면을 나눠 분석하는 방식을 적용할 수 있습니다. 문서 요소는 내용과 스타일을, 3D 장면은 물체·카메라·시간에 따른 변화를 재구성 대상으로 삼는 제안입니다. AI 분석 결과도 해당 표현 단위에 맞춰 편집 구조로 연결해야 합니다.

이때 제목을 직접 수정하는 기능과 3D 장면 전체를 복제하는 기능은 구현 범위를 구분해야 합니다. WEBT에서 구축한 요소 선택·수정·저장은 사용자가 웹 문서를 다루는 편집 기반입니다. 고난도 장면을 추가로 다루려면 해당 소스와 동작 특성에 맞는 재구성 범위를 정해야 합니다.

이미지 HTML 변환: 객체 단위 편집과 장면 데이터

상세페이지 이미지를 웹 문서로 바꿀 때는 이미지 안의 문구와 구성요소를 각각 수정할 수 있어야 합니다. 이미지 파일을 통째로 교체하는 기능만으로는 특정 문장의 수정 요청을 처리하기 어렵습니다. WEBT의 이미지 HTML 변환은 이러한 객체 단위 편집을 목표로 구성했습니다.

이미지 편집기에는 페이지 목록과 편집 캔버스, 문구·배경·이미지 교체 컨트롤을 배치했습니다. 사용자는 작업할 페이지와 요소를 선택하고 수정할 내용을 입력합니다. 화면에는 수정 요청과 자료 첨부를 위한 패널도 함께 구성했습니다.

편집 처리의 중심에는 객체 ID 기반 장면 모델을 두었습니다. 객체 ID는 문구나 이미지처럼 개별 구성요소를 구별하는 식별값이며, 장면 모델은 한 화면을 이루는 객체 정보를 모은 구조입니다. 선택한 대상을 이 식별값과 연결해 문구를 직접 수정하도록 구현했습니다.

편집 UI는 타입스크립트 코드에 화면 구조를 함께 표현하는 TSX 컴포넌트로 구성했습니다. 화면에서 선택한 객체와 수정할 문구를 연결하고, 기준 버전과 변경 후보를 확인한 뒤 저장하는 흐름을 마련했습니다. 사용자가 바꾸려는 부분을 지정하고 결과를 살펴볼 수 있는 편집 절차입니다.

새로운 이미지 분석 기능을 설계한다면 AI의 문자인식과 영역 추출을 이 장면 모델 앞단에 둘 수 있습니다. 문자인식은 이미지 속 글자를 읽고, 영역 추출은 문구·배경·이미지의 위치와 범위를 구분하는 역할을 맡습니다. 분석 결과를 객체 정보로 정리해 편집기로 전달하는 것은 적용 가능한 파이프라인 설계입니다.

이 설계에서는 글자를 읽어 낸 결과와 편집 가능한 문서를 만드는 결과를 구분해야 합니다. 예를 들어 상품 설명을 인식했더라도 해당 문구의 위치와 편집 대상을 연결해야 사용자가 선택해 수정할 수 있습니다. AI의 출력과 편집기의 입력 사이에 장면 모델을 두는 이유입니다.

WEBT는 장면 모델에서 HTML과 scene.json을 내보내는 기능을 구현했습니다. HTML은 웹 문서로 표현한 결과를, scene.json은 객체 정보를 담은 장면 데이터를 제공합니다. 사용자는 편집한 화면의 웹 표현과 구성요소 데이터를 함께 확보할 수 있습니다.

동작 비교와 결과물 내보내기: 장면별 검수·JSZip

웹페이지를 재구성한 뒤에는 원본과 결과물의 차이를 확인하는 과정이 필요했습니다. 특히 움직이는 장면은 한 시점의 모양만 비교하면 변화 과정에서 생기는 차이를 놓칠 수 있습니다. WEBT 개발에서는 1프레임 단위로 동작을 살펴보는 자체 검수 도구를 활용했습니다.

프레임은 움직이는 화면을 이루는 개별 순간의 이미지입니다. 원본과 재구성 결과를 비교 대상으로 삼고 프레임별 차이를 살펴, 원인을 하나씩 좁혀 가는 방식으로 개발했습니다. 페이지 구조화 분석과 세부 동작 비교를 함께 사용한 것이 이 과정의 핵심입니다.

유사한 비교 체계를 구현할 때는 화면에 보이는 영역인 뷰포트의 크기와 스크롤 위치를 맞추는 방법을 적용할 수 있습니다. 애니메이션도 동일한 진행 시점을 기준으로 비교하도록 설계할 수 있습니다. 이는 비교 조건을 정하는 구현 제안이며, 한 장면의 일치를 전체 동작의 일치로 확대하지 않기 위한 기준입니다.

결과물을 전달하는 단계에는 저장본 다운로드와 소스 ZIP 구성을 구현했습니다. 여러 파일을 묶어 다루는 ZIP 처리에는 JSZip을 사용했습니다. 이 자바스크립트 라이브러리는 ZIP 파일의 생성·읽기·편집을 지원합니다.

파일 처리에는 원본 무결성 검사와 내보내기 버전 확인 로직도 포함했습니다. 무결성 검사는 원본이 의도치 않게 달라졌는지를 확인하는 절차이고, 버전 확인은 내보낼 저장본을 구분하는 절차입니다. ZIP 처리와 별도로 이 확인 과정을 두어 결과물을 구성하도록 했습니다.

내보낸 웹페이지는 편집기와 분리된 환경에서 열어 제목·카드·링크·버튼이 표시되는 결과를 확인했습니다. 이 과정은 저장한 내용을 외부 웹 결과물로 이어 가는 범위를 보여 줍니다. 장면 비교는 표현과 동작을, 내보내기 확인은 파일 구성과 저장 버전을 각각 다룹니다.

성공 요소

가장 큰 제약은 고난도 웹페이지의 표현을 분석하고 재구성하는 난이도였습니다. 트램스는 웹페이지를 구조화해 분석하고, 프레임 단위로 차이를 좁혀 가는 개발 방식을 적용했습니다. 화면의 인상만으로 판단하기보다 수정할 지점을 구체적으로 찾는 데 초점을 맞췄습니다.

또 다른 선택은 재구성 이후 사용자가 직접 수정할 수 있는 편집 흐름을 마련한 것입니다. 웹에서는 HTML 요소를 선택해 문구와 스타일을 바꾸고, 이미지 문서에서는 객체 ID를 기준으로 문구를 수정하도록 했습니다. 기준 버전과 후보를 확인한 뒤 저장하는 절차를 통해 수정 결과를 살펴볼 수 있게 했습니다.

마지막으로 저장과 내보내기를 결과물의 범위에 포함했습니다. 웹 소스 ZIP과 이미지 장면의 HTML·객체 데이터를 다루고, 내보낸 웹페이지를 별도 환경에서 확인했습니다. 이 사례의 구현 가치는 편집할 대상을 구분하고 수정 내용을 저장한 뒤 사용할 형태로 꺼내는 흐름을 갖춘 데 있습니다.

개발 기간 · 비용 · 투입 인력

WEBT의 개발 기간은 4개월, 개발 비용은 6,000만 원이며 투입 인력은 2명입니다. 해당 내부 프로젝트의 구축 범위를 기준으로 한 기간과 비용으로, 유사 프로젝트는 필요한 기능과 재구성 대상에 따라 범위를 별도로 검토합니다.