제목

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 프론트엔드 개발자, 디자이너, 사회적 이슈에 관심 있는 기술인
• 중간 수준의 React 및 CSS 기술을 가진 개발자에게 실무 적용 사례와 디자인 패턴을 학습할 수 있는 기회 제공

핵심 요약

• "June 12 & The Fight to Be Heard" 프로젝트는 React, Tailwind CSS, Framer Motion을 기반으로 니제리아 민주주의 역사를 시각화한 landing page
• whileInView 애니메이션과 반응형 디자인을 통해 역사적 사건의 연속성을 강조한 사용자 경험(UX) 설계
• #EndSARS 운동과 1993년 선거를 연결해 민주주의 투쟁의 현대적 의미를 전달하는 서사 구조 설계

섹션별 세부 요약

1. 프로젝트 배경 및 목적

• 니제리아 민주주의 기념일(6월 12일)을 기념하는 디지털 기념물로, 1993년 선거와 2020년 #EndSARS 운동의 연관성을 강조
• GitHub Pages에 호스팅된 라이브 버전과 GitHub 저장소 링크 제공
• 니제리아 사회에 대한 개인적 연관성을 기반으로 한 사회적 메시지 전달 목적

2. 기술 스택 및 개발 결정

• React와 Vite로 빠른 개발 환경 구축
• Tailwind CSS로 니제리아 국기의 상징적 색상(검정, 빨강)을 기반으로 디자인 시스템 구축
• Framer Motion으로 애니메이션 기반 수직 타임라인 구현 (예: whileInView 사용)
• react-scroll 라이브러리로 부드러운 단일 페이지 내 이동 가능

3. 디자인 및 타이포그래피

• 강한 인상을 주는 font-heading을 제목에, 역사적 기록감을 주는 font-mono을 날짜에 적용
• 색상 상징성: 검정(투쟁), 빨강(희생)을 통해 민주주의 투쟁의 감정적 전달

4. 향후 개선 방향

• "Stories" 섹션 추가: 니제리아인의 민주주의 관련 활동가 이야기를 익명으로 공유
• 교육 자료 및 초기 단계 조직(grassroots) 링크 추가

결론

• 애니메이션 기반 타임라인과 역사적 사건의 시각적 연결은 UX 설계에 중요한 인사이트 제공
• GitHub 저장소(https://github.com/Eztosin/June-12-Tribute)와 라이브 데모(https://eztosin.github.io/June-12-Tribute/)를 통해 프로젝트 구현 방식 직접 검토 가능
• 사회적 메시지와 기술적 구현의 결합이 프론트엔드 개발의 새로운 가능성을 보여주는 사례