플러스프로젝트 배경
1) 예상 리스크 및 대응 계획 - 다국어 전환 시 동적 생성 DOM 노드에도 i18n 키를 일관성 있게 적용하는 구조 설계 - 스크롤 애니메이션이 Mobile Safari에서 부드럽게 동작하도록 will-change 속성 최적화 - 관리자 편집 폼과 메인 페이지 미리보기 간 상태 동기화 구조 설계 - 3중 필터 조합 시 빈 결과 처리 및 필터 초기화 UX 일관성 유지 2) 프로젝트 목표 - 메
프로젝트 성과
JSON i18n 80키 다국어 즉시 전환 구조 구현
data-i18n 속성 기반 DOM 일괄 교체 방식으로 페이지 새로고침 없이 한국어/영문 전환을 구현합니다.
스크롤 트리거 섹션별 진입 애니메이션 구현
Intersection Observer API로 각 섹션 진입 시점을 감지하여 순차 페이드인 애니메이션을 적용합니다.
3중 조합 필터 게시판 구현
카테고리·태그·키워드를 Array.filter 체이닝으로 조합하고 debounce 검색을 적용한 게시판을 구현합니다.
SEO·콘텐츠 실시간 편집 관리자 화면 구현
메타 태그, 히어로 텍스트/이미지, 게시판 글을 관리하는 어드민 화면 5개를 구현합니다.
핵심 기능
메인 페이지 (히어로 + 서비스 소개)
AI 기술력을 시각적으로 전달하는 히어로 섹션과 핵심 서비스 카드를 배치합니다
진행 단계
레이아웃 설계 및 다국어 구조 구축
2026.04
다중 페이지 라우팅 구조와 JSON i18n 언어 팩을 설계하고 공통 헤더·푸터 컴포넌트를 구현합니다.
프로젝트 상세
1) 포트폴리오 소개 AI 기업의 반응형 홈페이지를 다중 페이지 구조로 구현하는 데모입니다. 히어로 섹션 스크롤 애니메이션, 한국어/영문 다국어 전환, 공지·PRESS·Tech Log 게시판, 그리고 관리자 페이지(SEO·Footer·게시판 관리)를 포함하는 풀스택 구성을 설계할 예정입니다. 2) 작업 범위 - 메인 페이지 (히어로 + 서비스 소개): AI 기술력을 시각적으로 전달하는 히어로 섹션과
