이우림 개발자 홈페이지

해결 과제

웹페이지와 제출용 문서에 같은 경력을 반복 입력하지 않고, 프로젝트와 글을 지속적으로 추가할 수 있는 구조가 필요했습니다.

담당 업무 · 구현

• Next.js App Router의 라우트, 화면 컴포넌트, 도메인별 데이터 요청을 분리하고 프로필·경력 데이터를 공통으로 참조하도록 구성했습니다.
• Notion Internal Integration API로 블로그·포트폴리오 데이터베이스를 조회하고, 공개 여부·기간·기술 스택 속성을 읽어 포트폴리오 카드에 매핑했습니다.
• PDF 인쇄 아키텍처: 이력서·경력기술서·포트폴리오 문서를 메인 화면에 그리지 않고, 화면 밖에 항상 떠 있는 숨김 iframe에 React Portal로 렌더링한 뒤 그 iframe에서만 print()를 호출하도록 설계했습니다. 메인 문서를 다크모드로 보고 있어도 인쇄 시작과 동시에 화면이 밝게 번쩍이는 현상을 없앴습니다.
• 트러블슈팅: iOS Chrome(CriOS)은 WebKit 기반이지만 인쇄 기능만 자체 구현이라, iframe만 골라 인쇄하지 못하고 항상 메인 문서를 통째로 인쇄해 빈 PDF가 나오는 것을 발견했습니다. userAgent로 이 환경만 분기해 메인 문서에 직접 렌더링 후 window.print()를 쓰는 별도 폴백 경로를 만들어 해결했습니다.
• 프로젝트 분류 필터, 반응형 내비게이션, 다크모드(next-themes)와 Motion 애니메이션을 적용했습니다.
• Next.js ImageResponse로 페이지별 Open Graph 이미지를 동적 생성해 링크 공유 시 페이지 내용이 반영되도록 했습니다.