but212
프로젝트 소개
Copytify
-
스포티파이 페이지를 클론한 프로젝트 Copytify를 제작했습니다.
이 프로젝트는 멋쟁이사자처럼 부트캠프 Team 10의 협업 과제로, 실제 Spotify의 UI/UX를 최대한 비슷하게 구현하면서 모듈화된 설계를 적용했습니다.
주요 특징으로는 재사용 가능한 컴포넌트(앨범 카드, 버튼, 링크 등), Spotify API 연동을 통한 실제 데이터 렌더링
그리고 반응형 디자인이 있습니다. 팀원 각자가 담당한 컴포넌트를 개발하여 하나의 완성된 서비스로 통합했습니다.
원자 컴포넌트
원자 컴포넌트는 재사용 가능한 컴포넌트를 의미합니다.
페이지 컴포넌트
페이지 컴포넌트는 메인 페이지를 구성요소와 추가 페이지입니다.
기능 컴포넌트
기능 컴포넌트는 기능별 컴포넌트 집합입니다.
회고록
-
고우현
회고록 내용
-
김동규
멋쟁이사자처럼 부트캠프를 시작하고 한달 즈음 됐을 때 첫 프로젝트가 시작되었습니다. 매끄럽게 흘러가진 않았지만, 정말 재미있고 열정적으로 임했던 시간이었습니다. 이번 프로젝트를 통해 많은 것을 배우고 성장하는 기회가 되었습니다.
내가 맡은 일
Header 컴포넌트 제작 및 조립을 했으며 index.html와 메인페이지를 조장과 같이 만들었습니다.
로그인 페이지를 제작했습니다.
회원가입 페이지를 제작했습니다.
앱 설치 페이지를 제작했습니다.배운 점 & 느낀 점
실제 서비스를 벤치마킹해보며 어떤 구조로 콘텐츠가 배열되고, 사용자 경험이 구성되는지를 더 깊이 이해할 수 있었습니다. 단순한 마크업을 넘어서서, 사용자가 어떤 동선으로 콘텐츠를 소비하는지를 고려한 UI 구성의 중요성을 체감했습니다. 완성된 결과물이 Spotify와 꽤 흡사하게 나와서 개인적으로도 뿌듯했습니다.
아쉬운 점 & 다음 도전
앨범과 플레이리스트를 받아올 때 다소 비효율적인 부분이 있었지만, 리팩토링을 통해 개선할 수 있었습니다. 팀원들과 선생님이 주는 피드백을 통해 접근성을 개선할 수 있었지만 처음부터 고려했으면 좋았을 것 같습니다. 한국은 미리 듣기 파일을 지원해주지 않아 재생을 만들지 못한 부분이 아쉽고 기회가 된다면 그런 부분까지도 구현해보고 싶습니다.
-
석정일
이번 프로젝트는 제가 프론트엔드 부트캠프를 시작하고 처음 맡는 프로젝트인 만큼 제로 베이스인 저에게 많은 부침이 있을 것이라고 생각했습니다 예상대로 많은 어려움이 있었으나 우리 조원들이 있었기에 행복하게 일을 할 수 있었던 것 같습니다. 조장으로서 부족함이 많은 나와 함께 해줘서 고마워요.
내가 맡은 일
정정당당하게 1명(저예요)만 빼고 모두 찬성해서 조장으로 선출되었습니다. 인덱스 페이지와 시안 홈페이지를 동규님과 같이 했습니다. 버튼 컴포넌트를 만들었는데 조원분들이 많이 써주셨길 바랍니다. 동규님이 해주신 모달 창에 디자인 마무리 했습니다. 스포티파이 패러디 로고 Copytify를 제작했습니다. public/icons의 대부분을 제작 혹은 시안에서 추출했습니다.
배운 점 & 느낀 점
조직적 협업이 얼마나 힘든지 알았습니다. 제가 명확한 길을 제시하지 못해서 직면한 비효율이 많았습니다. 조장이 됐으면 조장으로서의 역할이 뭐여야 하는지 충분히 사유하지 않고 행동에 옮겼습니다. 협업에서 조장은 명확한 길을 알고 그 길로 팀원들을 이끌어야 한다는 점을 알게되었습니다.
아쉬운 점 & 다음 도전
일단 팀 리더로서 많이 부족하다는 것을 알게 되었습니다. HTML/CSS는 어떻게든 할 수 있었지만 자바 스크립트를 다룰 때는 제로 베이스라서 AI가 필수가 되었습니다. AI를 최대한 덜 쓰는 것을 목표로 했지만 그렇기에 구현할 수 한정될 수 밖에 없었습니다. 생각을 많이 해봐야할 것 같아요.
-
오경태
이번 프로젝트에서는 Spotify의 UI를 클론하며 메인 앨범과 플레이리스트 리스트를 구현하는 역할을 맡았다. 단순히 디자인을 따라 만드는 것이 아니라, 실제 서비스에서 사용되는 기능과구조를 최대한 유사하게 구현하는 것을 목표로 삼았습니다.
내가 맡은 일
메인 화면의 앨범 리스트 및 플레이리스트 구현했습니다. 데이터를 구조화하고 화면에 동적으로 렌더링되도록 구성했습니다. Spotify의 UI/UX를 참고해 인터랙션과 디자인 디테일까지 반영했습니다. 플레이어 마크업과 스타일링을 추가했습니다.
배운 점 & 느낀 점
실제 서비스를 벤치마킹해보며 어떤 구조로 콘텐츠가 배열되고, 사용자 경험이 구성되는지를 더 깊이 이해할 수 있었습니다. 단순한 마크업을 넘어서서, 사용자가 어떤 동선으로 콘텐츠를 소비하는지를 고려한 UI 구성의 중요성을 체감했습니다. 완성된 결과물이 Spotify와 꽤 흡사하게 나와서 개인적으로도 뿌듯했습니다.
아쉬운 점 & 다음 도전
앨범과 플레이리스트를 받아올 때 다소 비효율적인 부분이 있었지만, 리팩토링을 통해 개선할 수 있었습니다. 팀원들과 선생님이 주는 피드백을 통해 접근성을 개선할 수 있었지만 처음부터 고려했으면 좋았을 것 같습니다. 한국은 미리 듣기 파일을 지원해주지 않아 재생을 만들지 못한 부분이 아쉽고 기회가 된다면 그런 부분까지도 구현해보고 싶습니다.
스크럼 회의록
-
05-26
오늘 할일
조장 정하기 → 석정일
클론 사이트 선정 → 스포티파이
내일 할 예정
스포티파이에서 컴포넌트 추출(오경태)
컨벤션 및 깃헙 협업 방식 정하기(레포지토리 생성)
팀프로젝트 레포지토리 배포하기 컴포넌트 구조 설계
-
05-27
오늘 할일
컴포넌트 디자인 시안 만들기
브랜치 룰셋 정하기
netlify 배포
디스코드 웹훅 연결
아이콘 추출 협업 관련 논의
Label 수정
프로젝트 파일 구조 규칙 정하기
컴포넌트 역할 분담하기
내일 할 예정
index.html에 전체 틀 구성 CSS Grid 또는 Flex로 레이아웃 나누기
사이드바 구조(Home, Search, Library)
-
05-28
오늘 할일
index.html에 링크 텍스트 만들기
요구사항 명세서 구체화 및 문서화
사이드바 컴포넌트 완성
시안 페이지의 골격(rough) html 완성
내일 할 예정
헤더, 푸터, 메인 페이지 컴포넌트 완성
-
05-29
오늘 할일
반응형 기준 정하기 (px)
푸터 컴포넌트 완성 후 풀리퀘스트
버튼컴포넌트 완성
유저 프로필 버튼 or 드롭다운 모양
사이드바 컴포넌트를 동적으로 축소 확대를 구상할 것
내일 할 예정
페이지 컴포넌트에서 공통 컴포넌트 분리
메인 컴포넌트 완성후 풀리퀘스트
모든 모듈 풀리퀘스트 후 main으로 merge(netlify로 deploy)
-
05-30
오늘 할일
소스 안에 /public/ ← 지워버리기
컴포넌트 페이지에서 공통 컴포넌트로 분류된 페이지(버튼, 네비게이션 바, 앨범 카드, 플레이어 컨트롤, 검색 입력창, 플레이리스트 아이템)에 넣기(다음 주 월요일까지)
netlify에 deploy해보기
문서화(각 모듈의 README.md에 넣기)
공통변수들 정해가지고 문서화
다음주 월요일에 할 일
컴포넌트 페이지에서 공통 컴포넌트로 분류된 페이지(버튼, 네비게이션 바, 앨범 카드, 플레이어 컨트롤, 검색 입력창, 플레이리스트 아이템)에 넣기
-
06-02
오늘 할 일
중간점검 요청사항 오전까지 정하기
메인, 사이드바, 푸터, 헤더 합쳐보기 시도(완료)
내일 할 일
내일은 선거일 → 시간 있으면 모이기로?
메인, 사이드바, 푸터, 헤더 합쳐본 결과물에서 에러가 발생할 경우 해결
-
06-04
오늘 할 일
코드 카피버튼 만들기
시안 사이트 알리미 모달창 만들기
카드컴포넌트 그루핑
로고 바꾸기
모달창 위치 home.html로 바꾸기
login-page 수정
내일 할 일
회고록 작성
회의록 작성
내일 할 일
발표 준비 후 발표!
컨벤션
-
커밋 컨벤션
init: 프로젝트 초기 설정 및 첫 커밋
feat(specification): 새로운 기능 추가, 기존 기능 변경, spectification에 어떤 기능 관련인지 넣는다. 혹은 specification을 특정할 수 없으면 생략해도 된다.
remove : 파일이나 코드 삭제
fix: 버그 수정, 오류 개선
docs: README.md, .json 파일 등 문서파일 수정, 라이브러리 설치 관련 문서(문서 관련, 코드 수정 없음)
quality: 코드 형식, 정렬, 주석 등의 변경
style: CSS 등 사용자 UI 디자인 변경(제품 코드 수정 발생)
refactor: 코드 리팩토링(변수 이름 변경)
test: 테스트 코드 추가, 삭제, 변경 등 (코드 수정 없음, 테스트 코드에 관련된 모든 변경에 해당)
ci: npm 모듈 설치, 빌드 관련 프로세스 변경 .github에 있는 파일 생성 및 변경 등
chore: 패키지 매니저 설정할 경우, etc 등
rename: 이름 변경
-
Git Branch
feature/기능/ 해당 개발자 이름
ex: 석정일이 로그인페이지를 만드는 브랜치 : feature/login/sji
-
HTML/CSS 네이밍
소문자 사용: 모든 태그와 속성은 소문자
kebap-case: 클래스 네이밍에서 문자를 이을 때 “-” 사용
속성에 붙이는 따옴표: 쌍따옴표로 통일
-
HTML/CSS 포매팅 컨벤션
2칸 스페이스 사용 (탭 문자 사용 금지)
중첩된 요소는 부모 요소보다 한 단계 들여쓰기
닫는 태그는 여는 태그와 같은 레벨로 정렬
속성과 값 사이의 콜론 뒤에 한 칸 공백
각 속성은 새 줄에 작성
마지막 속성 뒤에도 세미콜론 추가
-
HTML/CSS 포매팅 컨벤션
2칸 스페이스 사용 (탭 문자 사용 금지)
중첩된 요소는 부모 요소보다 한 단계 들여쓰기
닫는 태그는 여는 태그와 같은 레벨로 정렬
속성과 값 사이의 콜론 뒤에 한 칸 공백
각 속성은 새 줄에 작성
마지막 속성 뒤에도 세미콜론 추가
절대경로 사용
-
파일 컨벤션
src/components: UI 컴포넌트 시안이 위치
src/scripts: JS파일이 위치
src/styles: 스타일 관련 CSS파일이 위치
src/assets: 정적 에셋들이 위치하는데 Vite로 번들링 시 필요한 위치에서 로딩됨. 안쓰는건 번들링에 포함이 안됨
-
파일 컨벤션
public/images: 웹사이트에서 사용되는 이미지 파일을 저장. 주로 로고, 배경 이미지, 버튼 아이콘 등을 포함
public/fonts: 웹사이트에서 사용하는 폰트 파일들이 위치하는 폴더
public/icon: 사이트에서 활용되는 아이콘 파일들을 포함하는 폴더
파일네이밍: 모두 소문자로 작명 kebap 케이스 활용 (예: music-component.html)