어느 날 에이전시 프로젝트 현장을 보면서 이상한 걸 발견했다.

퍼블리셔가 열심히 HTML/CSS로 마크업을 끝냈는데, 바로 옆에서 개발자가 그걸 보면서 React 컴포넌트로 다시 쓰고 있었다. 같은 UI를. 두 번.

이게 왜 당연하게 돌아가고 있지? 그 생각이 머릿속에서 한동안 안 떠났다.

실제 흐름을 보면

보통 이렇게 진행된다:

1. 디자이너가 시안을 넘긴다
2. 퍼블리셔가 HTML/CSS로 마크업한다
3. 개발자가 그걸 다시 JSX/TSX 컴포넌트로 옮긴다
4. 개발자가 데이터 연동하고 로직 붙인다

3번이 핵심이다. 퍼블리셔가 만든 결과물을 개발자가 그대로 쓸 수 없어서 재작성하는 단계다.

이게 얼마나 걸리길래

프로젝트마다 다르겠지만, 일반적인 기업 웹사이트 기준으로 한번 계산해봤다.

• 메인 페이지 1개: 3~4시간
• 서브 페이지 5개: 각 1~2시간
• 공통 컴포넌트(헤더, 푸터, 카드, 모달 등): 3~5시간

대략 10~15시간. 미드레벨 프론트엔드 개발자 시간 단가를 5만 원으로 잡으면 프로젝트 한 건에 50~75만 원이다.

월 3건만 돌려도 150225만 원. 연간으로 환산하면 1,800만2,700만 원.

이 돈이 새로운 기능을 만들거나 품질을 높이는 데 쓰이는 게 아니다. 이미 누군가 만든 걸 다른 포맷으로 다시 쓰는 데 들어간다. 솔직히 이건 좀 아깝다.

왜 이게 계속 반복되나

퍼블리셔가 JSX를 직접 쓸 수 없기 때문이다.

HTML과 JSX가 비슷해 보여도, 퍼블리셔 입장에선 생소한 부분이 꽤 있다. class 대신 className, 자기닫힘 태그, 컴포넌트 분리 방식—별도 훈련 없이 실무에서 바로 적용하기는 어렵다.

그래서 에이전시는 어쩔 수 없이 개발자한테 맡기고, 개발자는 로직보다 마크업 변환에 시간을 쓴다.

만약 이 단계가 사라지면

퍼블리셔가 처음부터 TSX 컴포넌트로 납품할 수 있다면 3번 단계 자체가 필요 없어진다.

개발자는 데이터와 로직에만 집중하고, 퍼블리셔 산출물이 바로 프로젝트에 들어간다. 이게 가능하려면 퍼블리셔가 "개발자 수준"이 될 필요는 없다. 핵심 패턴 20가지 정도만 실무 기준으로 익히면 된다.

이 구조에 대한 생각을 요즘 계속 정리하고 있다. 다음에는 실제로 어떤 패턴들이 필요한지 좀 더 구체적으로 써볼 생각이다.