기업 웹사이트 개발·유지보수

기업 웹사이트 개발·유지보수

로봇·자동화 솔루션 기업의 공식 웹사이트 2종(본사·관계사)을 개발·운영·유지보수한 프로젝트입니다. 기업 소개·제품/솔루션 홍보·고객 문의 접수를 하나의 흐름으로 연결하고, 제품군이 계속 늘어나는 환경에서 데이터 기반 구조로 확장성을 확보했습니다. 실제 영업 리드가 발생하는 온라인 접점으로 운영되며, 운영 중 발생하는 API 변경·UX 이슈에 직접 대응해 실사용 품질을 유지했습니다.

• •기간: 2024년 ~ (운영 중)
• •플랫폼: Web (반응형 — 모바일 / 태블릿 / 데스크톱)
• •성격: 실사용 중인 기업 공식 웹사이트 2종 개발 · 운영 · 유지보수

담당 역할

프론트엔드 전반(개발 + 운영/유지보수)을 담당했습니다. 방문자가 회사와 제품 정보를 확인한 뒤 문의까지 자연스럽게 이어지도록 흐름을 정리했고, 여러 사이트를 같은 구조로 운영할 수 있도록 데이터 기반 구조를 만들었습니다.

• •회사소개 · 제품/솔루션 · 보도자료/IR · 문의하기 페이지 구현 및 라우팅
• •데이터 파일 + 재사용 컴포넌트 기반의 확장형 페이지 아키텍처 설계
• •다국어(국/영) 콘텐츠 구조 설계
• •문의 폼 + reCAPTCHA + n8n 웹훅 + 이메일 API 연동 리드 수집 구조
• •제품 상세 스펙 탭의 URL 해시 딥링크 및 스크롤 동기화
• •SEO(메타 · Open Graph · JSON-LD) 및 반응형 처리
• •운영 중 API 스펙 변경 · UX 이슈 대응 (유지보수)

기술 스택

사이트에 따라 Next.js(Pages Router) 또는 React + Vite 환경에서 작업했습니다.

핵심 기능

데이터 기반 확장형 페이지 구조

조리·용접·팔레타이징 등 솔루션 페이지와 로봇 제품 페이지가 계속 늘어납니다. 콘텐츠를 dataItems/*.js로 분리하고 KeyFeaturesDiv·BackgroundDiv·RobotProductGallery 같은 재사용 컴포넌트로 조합해, 새 페이지를 추가할 때 데이터 파일만 작성하면 되도록 구조화했습니다.

다국어 지원 (국/영)

별도 i18n 라이브러리 없이 ?l=en 쿼리 파라미터로 언어를 분기하거나, 사이트에 따라 i18next를 사용합니다. 데이터 파일을 언어별 키로 구성하고, 메뉴·본문·문의 폼 라벨·개인정보 동의 문구까지 언어에 따라 표시하며, 네비게이션 이동 시 선택 언어가 끊기지 않도록 유지합니다.

문의 폼 · 리드 수집 구조

회사명·담당자·연락처·문의 유형/내용·개인정보 동의를 포함한 문의 폼입니다. 전화번호 자동 포맷팅, 필드별 입력 검증, SweetAlert2 피드백, 성공 시 폼 초기화까지 정리했습니다. 제출 시 n8n 웹훅과 이메일 API를 병렬 호출해 자동화 알림과 메일 발송이 동시에 동작하며, site 태그로 다중 사이트 리드를 구분합니다.

reCAPTCHA 기반 스팸 방지

운영 사이트 특성상 노출된 문의 폼이 봇·스팸에 취약해 Google reCAPTCHA를 도입했습니다. 인증 토큰이 없으면 제출 자체를 차단하고, 토큰을 API 요청에 함께 전송하도록 구성했습니다.

제품 상세 스펙 탭 · URL 해시 딥링크

로봇 제품 상세는 시리즈별 스펙을 탭으로 제공하고, #모델명 형태의 URL 해시로 특정 탭에 바로 진입·스크롤되도록 했습니다. 외부 링크나 메뉴에서 특정 모델로 직접 연결할 수 있어 탐색 동선을 단축했습니다.

보도자료 · 회사소개

API에서 받은 보도자료를 최신순 정렬하고 site_num 기준으로 현재 사이트 관련 뉴스만 필터링해 "더보기" 방식으로 증분 로드합니다. 회사소개는 인사말·연혁·오시는 길(Google Maps)·파트너사로 구성하고, 전시회·공지 팝업은 쿠키 기반("오늘 하루 보지 않기")으로 노출합니다.

성과

• •실제 운영 중인 기업 공식 웹사이트로 사용
• •솔루션 탐색에서 문의 접수까지 이어지는 영업 리드 수집 채널 역할
• •데이터 기반 구조로 제품·솔루션 페이지 추가 작업 범위를 축소
• •다국어·반응형·SEO·운영 데이터 연동을 포함한 프론트엔드 운영을 지속 담당

구현 상세

기업 웹사이트를 개발하고 운영하면서 제품 정보 탐색과 문의 접수가 끊기지 않도록 화면 구조와 데이터 구조를 함께 정리했습니다. 제품군이 계속 늘어나는 환경이라, 신규 페이지를 추가할 때 기존 컴포넌트를 재사용할 수 있는 구조에 특히 신경 썼습니다.

1. 데이터 기반 확장형 페이지 아키텍처

조리·용접·팔레타이징 등 솔루션 페이지와 로봇 제품 페이지가 계속 추가됩니다. 페이지마다 화면을 새로 만들면 유지보수가 어려워질 수 있어, 콘텐츠와 화면을 분리했습니다.

• •콘텐츠는 dataItems/*.js에 언어별 키 구조로 보관
• •화면은 KeyFeaturesDiv · BackgroundDiv · OnSiteColumns · RobotProductGallery 등 재사용 컴포넌트로 구성
• •페이지는 데이터를 컴포넌트에 주입하는 얇은 조립부 역할만 담당

pages/app/cooking.js        ← 얇은 조립부
  ├─ dataItems/cookingItems.js   (콘텐츠 / 국·영)
  └─ components/DataItems/*       (재사용 UI 블록)

새 솔루션 페이지를 추가할 때 데이터 파일 한 개만 작성하면 동일한 레이아웃·반응형·다국어가 그대로 적용됩니다. 제품군 확장 속도가 빠른 운영 환경에 맞춘 구조입니다.

2. 문의 전환 구조 — 폼 설계 + 리드 수집 병렬 호출

방문자가 솔루션에 관심을 가진 뒤 바로 문의로 이어져야 영업 리드가 됩니다.

• •전화번호 자동 포맷팅(하이픈 자동 삽입), 필수값 누락 시 SweetAlert2 경고 모달
• •연락처·이메일 등 필드별 형식 검증과 비정상 입력 패턴 차단
• •데스크톱(windowWidth > 1200)과 모바일 폼을 분리해 각 환경에 맞는 레이아웃 제공

[제출]
  ├─ n8n 웹훅 (알림·자동화 워크플로우 트리거)
  └─ 이메일 API (담당자 메일 발송)

두 호출을 `Promise.all`로 병렬 진행해 한쪽 지연이 전체를 늦추지 않게 했고, site 태그로 여러 사이트가 공유하는 리드 수집 엔드포인트에서 출처를 구분합니다. 성공 시 INITIAL_STATE로 폼을 초기화해 중복 제출을 막았고, SendGrid 기반 Next.js API Route(/api/contact)도 메일 채널로 두었습니다.

3. 제품 상세 스펙 탭 — URL 해시 딥링크 + 스크롤 동기화

로봇 제품 상세는 시리즈별 스펙이 많아 탭으로 나눴고, 특정 모델로 바로 진입할 수 있어야 했습니다.

• •window.location.hash를 읽어 해당 탭 패널을 찾아 click() + scrollTo로 위치 이동
• •hashchange 이벤트를 구독해 페이지 내 해시 이동에도 동일하게 반응
• •메뉴·외부 링크에서 #모델명으로 직접 연결 가능

/robot/series#모델명  →  해당 스펙 탭 자동 선택 + 스크롤

까다로웠던 건 초기 진입 시점과 렌더링 이후의 `offsetTop` 값이 달라 스크롤 위치가 어긋나는 문제였습니다. firstHashRef로 첫 진입을 한 번만 구분해, 첫 진입과 이후 이동의 보정 높이(TAB_HEIGHT)를 다르게 적용해 해결했습니다.

그 외 구현

• •다국어 동기화: 기존 구조에 맞춰 ?l=en 쿼리 파라미터로 분기. 데이터는 items[lang] 키로 관리하고, 네비게이션 이동 시 쿼리 파라미터를 유지해 언어가 끊기지 않게 함
• •보도자료: API 데이터를 id 내림차순 정렬, site_num 필터로 현재 사이트 뉴스만 노출, "더보기"로 6개씩 증분 로드
• •반응형: useWindowWidth 커스텀 훅, windowWidth > 1200 브레이크포인트, 별도 모바일 네비와 화면 폭별 레이아웃 조정
• •SEO: 페이지별 Head에 메타·Open Graph·Twitter 카드 + JSON-LD 구조화 데이터(Organization · WebSite · Product · Service) · canonical 적용
• •팝업·애니메이션: react-cookie로 "오늘 하루 보지 않기" 1일 만료 쿠키 처리, Framer Motion + react-intersection-observer로 스크롤 진입 연출

트러블슈팅

• •해시 딥링크 스크롤 어긋남: 초기 진입과 렌더링 후의 offsetTop이 달라 탭 위치로 정확히 스크롤되지 않음 → firstHashRef로 첫 진입을 한 번만 구분해 보정 높이를 분기.
• •뉴스 API 필드명 변경 대응: 공유 API의 이미지·링크 필드(display_img · news_link)가 바뀌어 미노출 → 참조 키를 한 곳에서 관리하도록 매핑 지점을 일원화.
• •문의 스팸 방지: 누구나 즉시 제출 가능한 구조 → reCAPTCHA 도입, 토큰 없으면 제출 차단 + API에 토큰 동봉, 필드별 입력 검증 병행.
• •다중 사이트 리드 구분: 여러 사이트가 같은 리드 수집 엔드포인트를 공유 → 제출 데이터에 site 태그를 실어 출처를 구분.