홈페이지·이력서·Studio의 역할 분리

처음에는 개인 소개와 최신 글을 보여주는 홈페이지, 경력을 정리한 이력서 사이트를 만들었습니다. 이후 개인 서비스와 Studio가 늘어나면서 홈페이지에 모든 내용을 길게 넣기보다 각 공간으로 안내하는 편이 맞겠다고 생각했습니다.

지금은 메인 홈페이지를 입구로 두고 블로그, Resume, Studio에 서로 다른 역할을 맡기고 있습니다. 이 글에서는 그 구성이 바뀐 과정과 공통으로 관리하는 부분을 정리합니다.

홈페이지와 블로그 연결

초기 홈페이지에는 소개와 최신 글을, 이력서 사이트에는 경력 내용을 뒀습니다. 테마와 폰트를 정리하고 Docker 이미지로 NAS에 배포했습니다. 외부 CDN 대신 로컬 폰트를 포함하는 변경도 이때 진행했습니다.

최신 글은 RSS를 읽는 API로 연결했습니다. 홈페이지에서 글 본문을 다시 관리하지 않고 블로그에 있는 글을 보여주는 방식입니다. 이 경로의 네트워크 오류를 조사한 내용은 RSS 피드 문제 글에 정리했습니다.

서비스 증가에 따른 메인 화면 변경

10월에는 메인 화면을 서비스 허브로 바꿨습니다. 개인 소개를 모두 반복하기보다 서비스와 블로그, 이력서, Studio 중 어디로 이동할지 보여주는 데 집중했습니다.

메인에는 서비스 소개와 3D 오브젝트를 넣고 단순한 카드 보기로도 탐색할 수 있게 했습니다. 소개용 이미지와 실제 제품 화면 캡처도 구분해서 사용했습니다. 시각적인 소개가 실제 기능 화면으로 오해되지 않도록 하기 위해서입니다.

링크를 연결하는 화면의 데이터

허브 화면에서는 소개 문장과 이동 대상을 한곳에서 관리하는 편이 수정하기 좋습니다. 아래는 현재 서비스 구분을 설명하기 위한 데이터 예시입니다. 실제 홈페이지 소스의 객체를 그대로 옮긴 것은 아닙니다.

export const destinations = [
  { id: 'blog', title: '개발 기록', href: 'https://blog.ersione.com',
    description: '구현 과정과 선택 이유를 읽는 공간' },
  { id: 'resume', title: '경력', href: '/resume',
    description: '경력과 프로젝트를 찾아보는 공간' },
  { id: 'studio', title: 'Studio', href: '/studio',
    description: '직접 둘러보고 조작하는 공간' },
];

/resume, /studio는 화면 조합을 설명하는 예시 경로입니다. 실제 서비스에서는 공개한 주소로 바꿉니다. 중요한 것은 프로젝트명만 나열하기보다 이동하면 무엇을 볼 수 있는지 설명하는 것입니다. 같은 프로젝트라도 코드 읽기와 서비스 사용, 작업 과정 읽기는 목적이 다릅니다.

3D 보기와 카드 보기에도 같은 서비스 정보를 전달하면 링크나 설명을 바꿀 때 두 화면을 따로 수정하지 않아도 됩니다. 표현은 달라도 이동 대상이 같아야 하므로 데이터와 화면을 나눠 볼 수 있습니다. 실제 홈페이지 README에도 3D 서비스 허브와 카드 보기, 블로그 피드가 서로 다른 영역으로 정리돼 있습니다.

서버에서 읽는 정보와 브라우저에서 고르는 표현

블로그의 최신 글은 홈페이지 서버가 RSS를 읽고 /api/writing으로 전달합니다. 브라우저가 외부 피드를 직접 읽는 경로를 별도로 두지 않으면 네트워크 실패와 대체 동작을 서버에서 모아 관리할 수 있습니다.

서버에서 자료를 준비하는 부분과 사용자가 보기 방식을 고르는 부분을 분리했습니다. 이력서의 긴 프로젝트 설명을 허브 API에 다시 넣기보다 상세 경력 페이지로 연결하고, 블로그 글도 피드 제목과 주소를 통해 본문으로 이동하게 했습니다. 콘텐츠를 한곳으로 모으는 것보다 각 원본으로 들어갈 입구를 만드는 구성이 됐습니다.

공통 디자인 시스템은 이 주변의 메뉴와 컨트롤을 맞추는 데 사용합니다. 정보의 순서까지 일괄 적용하지는 않습니다. 홈페이지에서는 서비스 선택이 먼저지만 Resume에서는 기간·역할·프로젝트를 찾는 흐름이 중요하고, Studio에서는 방과 사물을 조작하는 흐름이 중심이기 때문입니다.

이력서 원본과 웹사이트 분리

이력서에서는 편집 원본, HTML·PDF 결과물, 공개 웹사이트를 구분했습니다. 원본과 결과물의 버전을 맞추되 경력 증빙과 개인 자료를 공개 사이트에 함께 넣지는 않았습니다.

사이트에는 한국어·영어 포트폴리오와 상세 탐색, 기간과 분야 태그를 정리했습니다. 경력 문서의 버전과 사이트 패키지 버전은 다르게 관리합니다. 사이트 기능을 수정하는 것과 경력 내용을 갱신하는 것은 같은 변경이 아니기 때문입니다.

공통 디자인과 서비스별 화면

메뉴와 테마, 기본 컴포넌트는 공통 패키지를 사용했습니다. 하지만 홈페이지의 서비스 탐색과 이력서의 경력 탐색은 각각의 흐름을 유지했습니다. 같은 버튼을 사용한다고 모든 사이트의 화면 구조까지 같아질 필요는 없었습니다.

공통 패키지를 바꾸면 각 사이트에서 다시 빌드하고 확인해야 합니다. 최종 작업에서는 이미지 빌드·업로드와 실제 운영 반영을 나눠 확인했고 배포 완료까지 확인했습니다.

각 공간의 역할을 정한 뒤에는 같은 소개와 프로젝트 설명을 모든 화면에 반복해서 넣기보다 필요한 곳으로 연결하는 구성이 됐습니다. 홈페이지는 전체를 안내하고, 상세 내용은 해당 문서나 서비스에서 이어 볼 수 있도록 했습니다.