회사 홈페이지 재구축

오래된 회사 소개 사이트를 Next.js 로 다시 만들었습니다. 사업 영역과 제품을 설명 중심으로 재배치하는 것이 목적이었습니다.

페이지는 빌드할 때 미리 생성해 사내 서버의 컨테이너에서 Next.js 서버로 게시하고, 시스템 테마를 따라가는 화면과 반응형 배치를 기본값으로 두었습니다.

문구와 목록을 코드에서 분리해, 내용 수정이 개발 없이 끝나도록 정리했습니다.

제품 상세의 그림 영역에는 정적 그림과 영상 파일, YouTube 임베드를 한 목록에 섞어 넣을 수 있고, 화면이 주소 형태를 보고 종류를 가려 보여 줍니다.

콘텐츠는 제품, 참여 프로젝트, 개발용역, 채용, 회사 정보, 주문형 AI 모델 개발의 여섯 데이터 파일로 나눴습니다. 제품 항목은 분류 키, 한 줄 요약(40~70자), 2~3문장 단락, 주요 기능 6개 안팎, 사양 표, 인증, 외부 링크를 가진 타입으로 고정했습니다. 글쓰기 규약은 3인칭으로 통일하고, 약어는 처음 한 번 풀어 쓰고, '고성능' 같은 막연한 형용사 대신 인증과 수치로 신뢰를 보이고, 한 줄 요약에는 마침표를 쓰지 않는 것입니다.

색은 shadcn 토큰과 브랜드 토큰만 쓰고 흰색이나 회색을 직접 지정하는 것을 금지해, 라이트와 다크가 같은 코드로 동작합니다. 테마 전환 버튼은 두지 않고 시스템 설정을 따르며, 확인할 때만 주소 매개변수(`?theme=light`·`?theme=dark`)로 강제할 수 있게 했습니다. 폰트는 Pretendard Variable 한 파일을 직접 호스팅하고, 4K 화면을 위한 1920px 구간과 최대 폭 컨테이너로 큰 화면에서 배치가 퍼지지 않게 했습니다.

UI 구성 요소는 shadcn 위에 얹되 원본 파일은 고치지 않고 감싸서 씁니다. 이 프로젝트의 shadcn 이 Base UI 기반이라 `asChild` 를 지원하지 않아, 링크에는 버튼 스타일 함수를 직접 적용했습니다. 제품 상세의 성능 요약 차트는 차트 라이브러리 없이 구현했고, 모바일에서 가로로 넘치던 것을 고쳤습니다. 참여 프로젝트는 분류별로 묶어 최신 4건만 보이고 나머지는 접으며, 발주처는 공공 연구기관·민간 같은 일반 분류로만 적고 사업명과 계약 금액·인원은 싣지 않습니다.

응답 헤더로는 HSTS, 콘텐츠 형식 추측 차단, 프레임 제한, 리퍼러 정책, 카메라·마이크·위치 권한 차단을 설정했습니다. 8월에는 자동 동기화가 인증 토큰 만료로 조용히 멈춰 있던 것을 찾아 원인을 규명하고 토큰을 교체했으며, 만료 감시를 작업 목록에 올렸습니다. 같은 이름의 이미지를 다시 빌드하면 기존 이미지가 재사용되어 변경이 반영되지 않는 점을 확인해, 태그를 올려 재빌드하는 절차로 정했습니다.

첫 커밋은 2026년 5월 19일이고 그달 25일까지 일주일 사이에 전체 커밋 74건 가운데 52건이 쌓였습니다. 6월 11일에는 제품 구성을 비전 AI 중심으로 다시 짜 분류를 재구조화했고, 8월에는 참여 프로젝트 화면 개편과 카탈로그 정리, 배포 인프라 정비를 했습니다. 문구와 화면 배치는 6월 10일 브랜딩 문구 검토 회의와 8월 13일 솔루션 아이콘·레이아웃 확정 회의에서 정했고, 녹음과 전사문, 회의록을 프로젝트 폴더에 함께 보관했습니다.

화면

더미 데이터로 채운 그림입니다. 실제 화면과 배치·문구가 다를 수 있습니다.

구조와 흐름