회계법인 브랜드 홈페이지
법인 소개, 업무 영역, 구성원 소개, 인사이트 목록·상세와 메인 화면을 Next.js 기반 반응형 홈페이지로 직접 구현한 프로젝트입니다.
프로젝트 개요
법인 소개, 업무 영역, 구성원 소개, 인사이트 목록·상세와 메인 화면을 Next.js 기반 반응형 홈페이지로 직접 구현한 프로젝트입니다. 검색 노출을 위한 메타 태그·OpenGraph·사이트맵 구조를 함께 설계했습니다.
작업 범위
- 메인 화면·법인 소개: 대표 메시지, 핵심 업무 영역, 최신 인사이트, 연혁을 한 흐름으로 보여주는 반응형 메인과 법인 소개 화면을 제공합니다
- 업무 영역 안내: 감사, 세무 자문, 기업 가치평가 등 업무 영역별 소개와 담당 구성원 연결 정보를 보여주는 화면입니다
- 구성원 소개: 구성원의 직위, 전문 분야, 사진을 카드로 보여주고 분야별로 걸러 볼 수 있는 화면입니다
- 인사이트 목록·상세: 분류별 인사이트 목록과 본문 상세, 이전·다음 글 이동, 공유용 메타 정보를 제공하는 콘텐츠 화면입니다
주요 업무
- 메인 화면·법인 소개 화면: 서버 컴포넌트로 메인과 소개 페이지를 렌더링하고, 연혁·메인 팝업은 CMS 데이터를 불러와 표시하는 구조로 설계합니다
- 업무 영역 안내 화면: 업무 영역 데이터를 목록·상세 구조로 나누고, 상세에서 담당 구성원과 관련 인사이트로 이동하는 링크를 제공합니다
- 구성원 소개 화면: 전문 분야 필터를 URL 쿼리와 동기화하고, 노출 순서는 CMS에서 지정한 값을 그대로 따르도록 구성합니다
- 인사이트 목록·상세 화면: 글마다 제목·요약·대표 이미지로 OpenGraph 메타를 생성하고, 사이트맵에 발행된 글만 포함하는 구조로 설계합니다
프로젝트 핵심 과제
구성원 사진과 인사이트 대표 이미지의 비율이 제각각일 때 레이아웃 이동 없이 보여줄 이미지 최적화 규칙 설계
회계·세무 전문 용어가 많은 긴 본문에서 가독성을 유지하는 타이포 위계와 목차 구조 설계
CMS에서 글을 수정한 뒤 정적 페이지가 갱신되는 시점과 사이트맵 반영 순서를 맞추는 재생성 전략
업무 영역·구성원·인사이트 사이 다대다 관계에서 순환 링크와 빈 목록 상태를 안전하게 처리하는 조회 설계
핵심 기능 상세
메인 화면·법인 소개
대표 메시지, 핵심 업무 영역, 최신 인사이트, 연혁을 한 흐름으로 보여주는 반응형 메인과 법인 소개 화면을 제공합니다.
- Next.js App Router 서버 컴포넌트로 메인·소개 페이지를 SSG 렌더링
- next/image 지연 로딩과 반응형 srcset으로 PC·모바일 이미지 분기
- Tailwind CSS 브레이크포인트 3단계로 PC·태블릿·모바일 레이아웃 구성
정적 생성 기반 메인 화면에 CMS의 연혁·팝업 데이터를 결합해 비개발자가 수정한 내용이 화면에 반영되는 구조를 설계합니다.
업무 영역 안내
감사, 세무 자문, 기업 가치평가 등 업무 영역별 소개와 담당 구성원 연결 정보를 보여주는 화면입니다.
- 동적 라우트 generateStaticParams로 업무 영역 상세 페이지 사전 생성
- 업무 영역과 구성원·인사이트 간 다대다 관계를 Strapi relation으로 모델링
- 아코디언 컴포넌트에 aria-expanded 속성을 적용해 접근성 확보
업무 영역을 중심으로 구성원과 인사이트가 서로 연결되는 탐색 구조를 구현하도록 설계합니다.
구성원 소개
구성원의 직위, 전문 분야, 사진을 카드로 보여주고 분야별로 걸러 볼 수 있는 화면입니다. 전문 분야 필터를 URL 쿼리와 동기화하고, 노출 순서는 CMS에서 지정한 값을 그대로 따르도록 구성합니다.
- 전문 분야 필터를 URL 쿼리 문자열과 동기화해 필터 결과 링크 공유 지원
- CMS의 노출 순서 필드를 정렬 기준으로 사용하는 서버 측 조회 구현
- 구성원 사진 비율 고정과 placeholder blur로 레이아웃 이동 방지
CMS에서 정한 노출 순서와 전문 분야 분류가 홈페이지 카드 배열에 그대로 반영되는 구조를 설계합니다.
인사이트 목록·상세
분류별 인사이트 목록과 본문 상세, 이전·다음 글 이동, 공유용 메타 정보를 제공하는 콘텐츠 화면입니다.
- generateMetadata로 글별 title·description·OpenGraph 태그를 동적으로 생성
- sitemap.ts 라우트에서 발행 상태 글만 모아 sitemap.xml 자동 구성
- ISR revalidate 설정으로 CMS 발행 내용이 목록·상세에 갱신되도록 구성
검색엔진과 공유 미리보기가 읽는 메타 정보를 글 데이터에서 자동 생성하고, 발행 상태가 사이트맵까지 이어지는 구조를 구현하도록 설계합니다.
프로젝트 진행 단계
사이트 구조·콘텐츠 모델 설계 · 2026.10
사이트맵 정의, 구성원·업무 영역·인사이트 콘텐츠 타입과 관계 설계
디자인 시스템·반응형 퍼블리싱 · 2026.10
Tailwind 토큰 정의, PC·태블릿·모바일 3단계 레이아웃과 공통 컴포넌트 구현
Next.js 페이지·CMS 연동 구현 · 2026.10
App Router 페이지, Strapi REST 연동, ISR 재생성 설정 구현
SEO 메타·배포 환경·인수인계 · 2026.10
generateMetadata, sitemap.xml 적용, Vercel 배포 구성, 소스코드 인도와 관리자 매뉴얼 작성
개발 결과
기술적 주안점
- 정적 생성 기반 메인 화면에 CMS의 연혁·팝업 데이터를 결합해 비개발자가 수정한 내용이 화면에 반영되는 구조를 설계합니다
- 업무 영역을 중심으로 구성원과 인사이트가 서로 연결되는 탐색 구조를 구현하도록 설계합니다
- CMS에서 정한 노출 순서와 전문 분야 분류가 홈페이지 카드 배열에 그대로 반영되는 구조를 설계합니다
