프로젝트 화면
작업 환경과 기여 범위
기자들이 기사 내용과 이미지, 요구사항을 전달했고, UI 구체화와 프론트엔드 개발, 배포는 혼자 담당했습니다. 2025년 4월부터 12월 사이 세 차례 외주로 작업했습니다.
맡은 작업
- 상세한 화면 설계가 없는 초기 단계부터 요구사항에 맞는 UI를 직접 구체화하고 프론트엔드 개발 진행
- SVG 지도·드래그 앤 드롭·차트·스크롤 애니메이션 등을 활용한 반응형 웹 구현
- AWS Amplify 기반 배포 및 서브도메인 설정
- 신문방송편집인협회의 2025 지역신문 기획취재 제작 지원 대상으로 선정된 프로젝트의 인터랙티브 결과물 제작
- 인천일보 팀 이달의 기자상 수상에 기여
독자의 선택 흐름
- 지역 선택SVG 지도
- 연령·관심사차트 선택·드래그로 순서 변경
- 기사 읽기선택 정보를 반영한 콘텐츠 흐름
지도에서 지역 선택 · 1 / 3
사용 기술
언어·프레임워크
Next.jsTypeScript
화면·인터랙션
Tailwind CSSFramer Motiondnd-kitNivoSVG
배포·도구
AWS Amplify
- SVG · Nivo · dnd-kit
- 지역·연령대·관심사를 각각 지도·차트·드래그 선택으로 표현했습니다.
- Framer Motion
- 콘텐츠에 맞는 화면 전환과 스크롤 애니메이션을 구현했습니다.
- AWS Amplify
- 반응형 웹을 배포하고 서브도메인을 연결했습니다.
화면을 구체화한 과정
요구사항을 인터랙션으로 구체화
기사와 이미지, 표현하고 싶은 내용은 있었지만 상세 화면 설계는 없었습니다. 전달받은 콘텐츠를 바탕으로 인터랙션과 시각화가 구현된 화면을 먼저 만들고, 기자들과 결과를 보며 구성과 동작을 조정했습니다.
독자가 지역은 SVG 지도에서, 연령대는 차트에서 선택하고 관심사는 4개 이상 고르고 드래그해 순서를 바꿀 수 있도록 구성했습니다. 화면 전환과 스크롤 애니메이션도 각 콘텐츠에 맞춰 구현했습니다.
관련 보도
해당 프로젝트를 활용한 인천일보 팀의 보도가 제423회 이달의 기자상을 받았습니다.