PROJECT INFO

JJAN E&M의 콘텐츠를 소개하기 위한 홈페이지.

아웃소싱 의뢰를 받아 제작한 Next.js 풀스택 프로젝트.

Framer-Motion, Marquee 등 다양한 애니메이션과 콘텐츠를 업데이트 할 수 있는

CMS 기능이 포함. 모바일 브라우저에 대응할 수 있는 반응형 레이아웃 포함.

Next.js를 이용해 SSR로 사용자가 페이지를 보는 순간 데이터를 UI에 렌더링.

API Route와 MySQL, Drizzle을 통해 백엔드를 구축하여 CMS 기능을 구현.

CONTRIBUTIONS

구글 폼·카카오톡을 활용해 요구사항을 명확히 하고, 기술적인 내용을 이해하기 쉬운 표현으로 설명하며 협업을 원활히 진행했습니다.

비개발자의 시선에서 서비스 구조를 파악하며 새로운 관점으로 UI/UX를 바라볼 수 있었습니다.

비개발자와의 대화에서 의도를 추론하고 질문하며 정확한 구현 방향을 도출했습니다.

CMS 기능을 통해 웹사이트 내의 정보를 자유롭게변경 할 수 있도록 구성했습니다.

프로필·연혁·작품·뉴스 등 변경되는 데이터를 편하게 관리하기 위해 CMS 기능을 도입했습니다.

뿐만 아니라 소개글, 배너 및 sns 링크도 변경할 수 있도록 하여 웹사이트를 구성하는 부분에 있어 자유도를 높였습니다.

Tailwindcss의 breakpoints를 사용하여 반응형 레이아웃을 구성하였습니다.

playsInline, webkit-playsinline 속성을 사용하여 WebK it 환경에서 <video autoplay>태그가
자동으로 전체화면으로 바뀌는 현상을 방지하였습니다.

또한 모바일 전용 헤더를 만들어 햄버거 메뉴를 통한 페이지 이동이 가능하도록 하여 모바일 환경을 위한
웹사이트를 구성할 수 있었습니다.

지루하지 않은 홈페이지를 만들기 위하여 다양한 애니메이션 기법을 사용하였습니다.

Framer-Motion을 사용하여 스크롤 계수에 대응하는 애니메이션을 추가하였고, IntersectionObserver를 사용하여 사용자의 화면에 등장했을 때 실행되는 애니메이션을 구현하였습니다.

react-f ast-mar quee 라이브러리를 사용하여 작품, 갤러리 요약에 mar quee 방식을 적용하여 사용자와
상호작용하지 않아도 여러 작품과 사진을 보여줄 수 있도록 구성하였습니다.

TROUBLE SHOOTINGS

Docker의 Bind Mount와 Nginx를 이용하여 정적 파일을 서비스 하도록 구성하였습니다.

Next.js App R outer가 uploads 경로를 페이지로 인식해 정적 파일이 노출되지 않는 문제가 있었습니다.

이를 Nginx 정적 서빙으로 우회해 안정적으로 파일을 제공하도록 개선했습니다.

Docker file에 빌드 시 마이그레이션 기록을 이미지에 복사하는 코드를 추가하여 문제를 해결했습니다.

사용 중인 Drizzle ORM의 Drizzle-kit이 마이그레이션 기록을 참조할 수 있도록 하여 DB의 테이블 현황을 확인할 수 있게 되었고, 중복이 발생하지 않을 수 있었습니다.

@font-face를 사용하여 웹에 직접 폰트를 임베딩하여 폰트가 적용되지 않는 문제를 해결했습니다.

@impor t를 사용하여 폰트를 불러오는 방식은 WebKit 환경에서 적용되지 않는 사실을 발견한 후, 폰트 파일을 직접 다운로드하고 @f ont-f ace를 이용하여 폰트를 불러와 사용했습니다.