Project Results.

이번에 시작한 미니 프로젝트는 Next.js와 TypeScript를 사용한 갤러리 홈페이지 퍼블리싱 작업입니다. CSS Grid를 활용하여 이미지를 스크롤하면서 Intersection Observer를 통해 이미지 위치를 확인하고, 스크롤 시 이미지를 동적으로 로딩하도록 구현했습니다. 이미지에 호버 시 다운로드 버튼이 나타나도록 하여 사용자에게 인터랙티브한 경험을 제공했습니다. Unsplash API를 사용하여 다양한 이미지를 동적으로 불러오는 기능을 추가했고, 이는 레이아웃과 디자인을 더욱 풍성하게 만들어주었습니다. 처음 CSS Grid를 사용하여 레이아웃을 구성하면서 CSS 코드가 자바스크립트처럼 복잡하게 느껴졌지만, 다양한 사이트와 예제를 참고하며 문제를 해결했습니다. 반응형 웹 디자인을 적용해 모바일, 태블릿, PC 환경 모두에 적합한 레이아웃을 만들었습니다. 이번 프로젝트를 통해 퍼블리싱 능력뿐만 아니라, Next.js와 TypeScript를 활용한 동적 웹 페이지 구현에도 큰 성장을 이룬 좋은 경험이었습니다.