2 min to read

커리어 점프를 위한 PS 풀이 블로그 분관 개설 - 08.20

여러 가지 의미가 담긴 프로젝트의 시작

Featured image

들어가며

흔히 개발자는 학습을 멈출 수 없는 직업이라고 합니다. 프론트엔드 생태계도 끊임없이 새로운 기술이 등장하며, 채용 시장의 기준도 최신 스택으로 옮겨갑니다. 그동안은 ‘근간’에 충실하려 노력했지만, 업계의 주류가 된 기술과 도구를 계속 외면할 수는 없습니다.

이번 프로젝트는 향후 이직에 도움을 주면서 동시에 개인적으로도 의미 있는, Next.js 기반 PS(Problem Solving) 코딩 테스트 블로그 분관을 만드는 것입니다. 최근 과제 테스트와 여러 공고를 보면서 Next.js 경험의 유무가 확실한 차이를 만든다는 점, 그리고 AI 활용 경험이 효율성과 완성도에 좋은 신호로 읽힌다는 점을 확인했습니다. 그래서 “채용 시장에서 설득력 있는 프로젝트”를 목표로 삼았습니다.

AI 활용 계획

빠르게 성숙한 v0

처음 v0.dev가 등장했을 때는 대기열 기반의 제한된 서비스였고, 프롬프트만으로 shadcn/ui를 활용한 실행 가능한 React 페이지를 생성해 주는 모습이 인상적이었습니다. 그 사이 에이전트형 도구들이 등장했고, v0도 정식 서비스인 v0.app으로 자리를 잡았습니다. 지금의 v0는 Next.js App Router로 여러 페이지를 구성하고, 실행 결과를 보면서 대화로 기능을 추가/수정하는 등 한층 다듬어진 경험을 제공합니다.

v0로 만들어본 블로그 초안을 남겨 둡니다. 약 11번의 프롬프트로, 모호한 “유명 서비스의 색감 벤치마킹” 같은 요구까지 적절히 반영한, 꽤 그럴듯한 초안을 뽑아낼 수 있었습니다. 미술 감각이 부족한 제 눈에도 충분히 만족스러웠습니다.

ChatGPT를 구독했다면, Codex도 써 보자

저는 그간 ChatGPT를 “참고 파일을 넣고 부분 수정” 용도로만 써 왔는데, 최근에야 코드베이스 전반을 맥락으로 활용해 Cursor 같은 작업 방식을 구현할 수 있다는 것을 알았습니다. 에이전트형 AI를 통해 반복 작업을 줄이고, 더 중요한 설계와 검증에 시간을 쓰는 방향으로 활용 범위를 넓힐 계획입니다.

MDX도 제대로 써 보자

이 블로그를 4년간 운영하면서 “마크다운을 조금 더 인터랙티브하게” 만들고 싶은 욕심이 있었습니다. 예컨대 튜토리얼 포스트에 Code Hike를 넣어 스크롤에 따라 코드 diff를 강조한다든지요. 다만 기존 블로그가 Jekyll 기반이라 React/MDX 생태계를 들여오는 게 쉽지 않았습니다.

신규 분관은 Next.js를 기반으로 하므로, MDX를 적극 도입합니다. PS를 주제로 하는 만큼 과도한 애니메이션은 지양하되, 다음과 같은 문서화 지원 요소는 활용해 볼 생각입니다.

테스트 코드 계획

블로그 자체의 로직 안정성을 확보하기 위해 테스트를 도입 해보려 합니다. SSG 특성상 문제는 빌드 이후에야 드러나기 쉬운데, 링크 깨짐·동적 라우트 누락·MDX 파이프라인 변경 같은 회귀를 미리 잡고, 리팩터링이나 의존성 업데이트(Next.js, rehype/remark, Shiki 등) 시에도 안심하고 변경하기 위한 안전망이 필요합니다.

테스트의 범위는 블로그 로직에 집중합니다. 날짜·슬러그·경로 생성과 front matter 파싱 같은 유틸은 단위 테스트로 검증하고, 게시글(MDX→React) 렌더링, 목차/이전·다음 글 네비게이션, 코드 하이라이트와 접근성 속성(헤딩 레벨, 랜드마크)은 컴포넌트 통합 테스트로 확인합니다. 라우팅과 빌드 단계에서는 동적 경로 생성과 내부 링크 무결성을 점검하고, 최소한의 E2E로 홈→게시글→태그(또는 목록)로 이어지는 핵심 흐름이 실제 DOM에서 정상 동작하는지 확인합니다.

운영은 PR마다 테스트·타입체크·린트를 자동 실행하며, 실패 시 병합을 차단합니다. 커버리지는 60% 내외에서 시작해 점차 상향하고, 필요 시 Lighthouse/Playwright로 핵심 페이지 성능을 모니터링할 계획입니다.

분관 운영 계획

‘분관’이라는 이름처럼 본관 블로그는 그대로 유지하되, 알고리즘·코딩 테스트 중심의 글을 분관에 축적 할 계획입니다. 만든다면 의미 있게 유지보수해야 합니다. 그 방법으로, 학습 기록의 체계적 축적, 재사용 가능한 코드/설명 컴포넌트화, AI 도구 활용 로그까지 함께 남길 계획입니다.

맺으며

기술 스택을 따라잡는 일은 끝이 없습니다. 이번 분관은 학습의 지속성과 채용 시장에서의 설득력을 동시에 겨냥한 실험입니다. 작게 시작해 꾸준히 개선하고 기록하겠습니다.