Home
“홍대 가려면 어떻게 가야 해요?”
“뉴진스의 하입보이요.”
| 구성원 | 담당 UI | 담당 기능 |
|---|---|---|
| 김혜빈 |
멤버 페이지 - 멤버별 갤러리 앨범 페이지 - 플레이리스트 |
멤버 페이지 - 멤버별 카드 이미지 호버 액션 앨범 페이지 - Three.js 를 이용한 앨범 패키지 3D 구현 |
| 나슬기 | 공통 페이지 - 페이지별 마우스 커서 및 반응형 멤버 페이지 - 응원 메세지 |
메인 페이지 - 영상 캐러셀 앨범 페이지 - 플레이리스트 음악 및 3D 텍스쳐 연동, 영수증 랜덤 각도 |
| 박한솔 🎖 | 메인 페이지 - 앨범 리스트 |
메인 페이지 - 멤버 포토 카드 랜덤 각도 멤버 페이지 - 멤버 갤러리 드래그앤 드롭 |
| 반재영 | 메인 페이지 - 멤버 포토 카드 및 호버 액션 |
메인 페이지 - 포토 카드 클릭과 갤러리 페이지 연결 멤버 페이지 - 응원 메세지 작성 및 불러오기 앨범 페이지 - 플레이리스트 다음곡 이동 및 회전 기능 |
| 이현호 |
공통 페이지 - 헤더, 풋터 메인 페이지 - 영상 |
메인 페이지 - 앨범 아이콘 클릭 시 팝업 메인 페이지 - 팝업 버튼 및 앨범 CD 애니메이션 |
-
24.11.01~11.11 - 아이돌 뉴진스에 처음 입덕하는 사람들을 위한 뉴진스 소개 페이지
사용언어 및 개발 환경
- ✔ tailwindcss 에 대한 복습과 활용
- ✔ Three.js 에 대한 복습과 활용
- ✔ 로컬 스토리지에 대한 학습과 활용
- ✔ 랜덤 함수에 대한 학습과 활용
- ✔ 마우스 이벤트에 대한 학습과 활용
기획 의도
- K-POP 인기상승에 따라 아이돌 웹사이트에 대한 투자와 관심 증가에 대한 대응
- 채널에 따른 다양한 정보를 한눈에 볼 수 있는 통로 필요
- 아이돌에 처음 입덕하는 사람도 부담없이 접근 가능한 사이트로 활용
| 페이지 | PC | MO |
|---|---|---|
| 메인 |  |
 |
|
● 영상 영역 • 캐러셀 처리된 3개의 뮤직비디오를 확인할 수 있으며 페이징 이동 시 영상과 함께 앨범명, 트랙명이 변경된다 ● 포토카드 영역 • 실제 포토카드 느낌을 줄 수 있는 이미지와 프레임(호버 시 노출)을 보여준다 • 포토카드는 페이지를 새로 로드할 때 마다 랜덤으로 각도가 지정된다 • 각 포토카드는 멤버 페이지의 갤러리 페이징과 연동되어있다 ● 앨범 리스트 영역 • 앨범 리스트를 소장한다는 느낌을 주기 위해 컴퓨터 아이콘 형식으로 보여준다 • 앨범 아이콘을 클릭 시 팝업이 생성됨과 동시에 컴퓨터를 벗어난 영역은 모두 블러 처리된다 • 블러처리된 영역과 팝업의 상단 점 모양의 버튼 클릭 시 팝업이 닫힌다 • 팝업의 CD 이미지에 음악에 따라 울리는 듯한 애니메이션과 호버 시 CD 를 들어올리는 듯한 효과를 보여준다 • 각 음원 서비스 아이콘을 클릭 시 해당 사이트의 앨범 페이지로 이동한다 • CD 이미지와 음원 서비스 마지막 아이콘은 앨범 페이지의 플레이리스트와 연동되어 있다 |
||
| 멤버 |  |
 |
|
● 갤러리 영역 • 캐러셀 처리된 멤버들의 사진을 확인할 수 있으며, 각 카드에 호버 시 멤버의 TMI 를 확인할 수 있다 • 활성화된 페이징 버튼은 해당 멤버의 대표 색상이다 • 멤버 사진들은 드래그앤 드롭으로 위치 이동이 가능하지만, 화면과 페이징 버튼 아래로는 이동할 수 없도록 제한되어 있다 ● 메세지 영역 • 최대 10개의 메세지가 보여진다 • 멤버들에게 전하고 싶은 메세지를 남길 수 있다 • 엔터키 입력과 동시에 로컬 히스토리에 메세지가 저장되며 메세지의 위치와 배경 색상은 랜덤으로 보여진다 |
||
| 앨범 |  |
 |
|
● 플레이 리스트 영역 • 앨범을 구매했다는 느낌이 들도록 CD 이미지와 함께 곡 목록을 영수증처럼 보여준다 • 재생/중지 버튼 클릭 시 음악이 연동되며 CD가 회전한다 • 이전/다음 버튼 클릭 시 CD가 뒤집히는 듯한 효과를 보여준다 • 앨범이 변경될 때 마다 영수증의 내용과 각도가 변경된다 • 영수증에는 각 앨범의 앨범명, 발매일, 곡 목록과 함께 사용자의 시간을 보여준다 • 영수증의 QR 코드를 클릭/스캔 시 해당 앨범의 유튜브 링크로 이동된다 ● 앨범 패키지 영역 • 앨범의 패키지도 셀링 포인트기 때문에 여러 각도에서 확인해 볼 수 있도록 3D로 보여준다 • 플레이리스트에서 앨범을 재 선택할 때 마다 해당 앨범의 패키지가 렌더링된다 • 앨범 패키지는 사용자의 마우스를 이용해 컨트롤 할 수 있다 • 마우스 컨트롤이 없는 경우 Y 축으로 회전하여 앨범 패키지를 전체적으로 보여준다 |
||