umsungjun.com을 만들게 된 이유와 페이지별 소개

블로그와 포트폴리오, 음악 채널을 한 주소에 모은 개인 사이트 umsungjun.com을 열었습니다.

어떻게 만들게 되었는지와 페이지마다 무엇을 담았는지 짧게 적어 보려고 합니다.

왜 만들게 되었을까?

얼마 전 EDM을 올리는 유튜브 채널 SUNGJUNN을 시작했는데 유입을 늘리고 싶어서 채널을 소개하는 브랜딩 페이지를 하나 만들 생각이었습니다.

이 페이지는 Vercel 기본 주소 대신 도메인을 사서 열기로 했습니다. 그런데 막상 도메인을 산다고 생각하니 페이지 하나에만 쓰기는 아까웠습니다.

그동안 만든 포트폴리오는 Vercel에 따로따로 떠 있었고 블로그는 티스토리에, 음악은 유튜브에 흩어져 있었습니다.

그래서 이참에 전부 한 주소에 모으면 어떨까 싶어 직접 만들어 보게 되었습니다.

페이지 소개

메인

첫 화면은 왼쪽에 프로필을 두고 오른쪽에 칸마다 최근 내용을 모았습니다.

블로그 최신 글과 제가 골라 둔 프로젝트, npm에 올린 라이브러리 둘, 채널 최근 영상까지 한 화면에서 볼 수 있습니다.

블로그

기존에 티스토리에 쓰던 글 403편 가운데 코딩 테스트 풀이 245편을 빼고 나머지 158편을 옮겨 왔습니다.

분류는 실무 경험 · 기술 정리 · 프로젝트 · 학습 기록 넷으로 나눴습니다.

썸네일은 손그림 느낌이 나도록 코드로 그렸습니다.

⌘K 검색과 GitHub Discussions 댓글도 붙였고 옮긴 158편 모두 영어판이 있습니다.

프로젝트

사내 프로젝트(Autowini · WiniLogis) 2개와 개인 프로젝트 8개, 오픈소스 2개를 탭으로 나눠서 보여 줍니다.

개인 프로젝트는 최근 것부터 연도별로 놓고 지금 운영 중인지 관리를 마쳤는지도 같이 적었습니다.

상세 페이지에는 소개 · 기능 · 기술을 두었는데 사용자 문의를 받아 고친 일이 있으면 그 기록도 함께 남겼습니다.

채널

쇼츠 채널 둘(3초 개발 면접 · 3초 경제 상식)과 음악 채널 SUNGJUNN을 소개하는 페이지입니다.

세 채널 모두 제가 혼자 운영하고 있는데 쇼츠는 주제 조사부터 영상 렌더링까지 AI 에이전트와 코드에 나눠 맡겼습니다.

채널마다 유튜브 · 인스타그램 누적 조회수 곡선과 최근 영상을 붙였고 조회수는 하루 한 번 저절로 갱신됩니다.

음악

SUNGJUNN 음악 페이지는 다른 칸과 달리 밤하늘 성도를 바탕으로 한 어두운 화면이고 첫 화면의 행성은 3D로 움직입니다.

안에는 앨범 · 곡 · 무료 사용 안내 페이지가 있습니다. SUNGJUNN과 원본 영상 링크를 남기면 수익을 내는 영상에도 무료로 쓸 수 있습니다.

소개

마지막으로 소개는 경력 · 오픈소스 기여 · 다루는 기술 · 연락처를 한 쪽에 모은 이력 페이지입니다.

만들면서 정한 것들

사이트 톤은 흑백으로 두고 색은 음악 칸 · 썸네일 · 상태 점처럼 꼭 필요한 곳에만 썼습니다.

언어는 한국어가 기본이고 영어판은 /en에 있습니다. 음악 칸에는 유튜브 설명을 현지화한 언어에 맞춰 일본어 · 포르투갈어 · 스페인어판까지 두었습니다.

Next.js 16으로 정적 사이트를 만들어 Cloudflare에 올렸고 매일 새벽 한 번씩 다시 빌드해서 새 곡과 조회수를 싣습니다.

오픈 전에 Lighthouse 모바일로 대표 22쪽을 점검했는데 16쪽이 성능 100이었고 접근성과 SEO는 모두 100이 나왔습니다.

느낀 점

처음에는 음악 채널 소개 페이지 하나로 시작했는데 흩어진 것들을 모으다 보니 생각보다 일이 커져서 블로그 글 158편을 옮기는 데까지 왔습니다.

앞으로 새 글과 새 곡은 이 주소에 올리려고 합니다.