본문으로 건너뛰기
← All Projects
Featured Project

KTI 홈페이지 리뉴얼

피뢰·서지·접지 전문기업(30여 년 경력) 한국기술산업의 Classic ASP 레거시 사이트를 현대적 스택으로 전면 리뉴얼. 2020년의 SPA 전환 설계(v1)를 거쳐, 2024년 Next.js 14 정적 사이트로 처음부터 재구축(v2)해 약 1개월 만에 완성·배포했다.

KTI 홈페이지 리뉴얼
KTI 홈페이지 리뉴얼
KTI 홈페이지 리뉴얼
KTI 홈페이지 리뉴얼

Project Overview

역할

나비이 공동창업자/CTO — 프론트엔드 100% 단독 개발. 나비이가 외주 수행한 프로젝트다.

두 단계

v1(2020.02~05): CRA + React 16 + TypeScript SPA 전환 설계. v2(2024.10~11, 약 1개월): Next.js 14 정적 사이트로 처음부터 재구축해 실제 완성·배포.

Project Story

프로젝트 이야기

배경과 과정, 그리고 판단의 기록

배경

한국기술산업(KTI)은 30여 년 경력의 피뢰·서지·접지 전문기업으로, 홈페이지는 Classic ASP 시절에 만들어진 레거시였다. 2020년 법인 설립 준비 기간에 CRA 기반 SPA 전환을 설계(v1)했고, 2024년에 Next.js 14 정적 사이트로 처음부터 재구축(v2)해 약 1개월 만에 완성·배포했다.

서버는 그대로, 렌더링만 바꾸다

핵심 결정은 레거시 ASP 백엔드를 교체하지 않는 것이었다. 프론트는 기존 백엔드를 axios로 호출하는 순수 클라이언트 사이드 소비자로 설계해, 서버를 건드리지 않고 렌더링 패러다임만 전환했다. 클라이언트 입장에서는 운영 중인 시스템의 위험 없이 사용자가 보는 면만 현대화된다.

라우팅은 route-paths.js 단일 소스로 관리해 헤더·네비게이션·브레드크럼이 한 곳에서 일원화되도록 했다. 이 설계 철학은 v1에서 세운 것을 v2가 그대로 계승한 것으로, 4년의 간격을 두고도 기획(6개 섹션)이 실제 6개 상위 라우트에 1:1로 채워져 출시됐다.

Technology Stack

이 프로젝트를 구성한 기술들

Next.jsNext.js 14 (Pages Router)
ReactReact 18
RecoilRecoil
styled-componentsstyled-components
YarnYarn Berry

Technical Implementation

Architecture decisions and code highlights

Architecture

System Design

Next.js 14 정적 사이트(output: 'export') — 레거시 ASP 백엔드를 그대로 소비하는 순수 클라이언트

Key Highlights

  • 레거시 ASP 백엔드를 그대로 재사용하면서 프론트는 axios로 호출하는 순수 클라이언트 사이드 소비자로 설계 — 서버 교체 없이 렌더링 패러다임만 전환

  • route-paths.js 단일 소스 라우팅으로 헤더·네비게이션·브레드크럼을 일원화 — v1의 설계 철학을 v2가 계승

Impact Analysis

Project Impact & Results

Real-world outcomes and measurable results

Key Metrics

v2 재구축 기간
약 1개월

Achievements

  • 2020년 콘텐츠 기획(6개 섹션)이 실제 6개 상위 라우트에 1:1로 채워져 "1.0" 정식 출시 — 기획과 결과물이 일치

Explore the Project

운영 중인 사이트와 소스 코드에서 실제 결과물을 확인할 수 있습니다.

Next Project

렛츠오더

Landing & API