멋쟁이 사자처럼 16팀
1rem
안녕하세요. 멋쟁이사자처럼 UI Project 16팀 1rem; 입니다.
저희 팀은 버거킹 웹사이트를 클론코딩하며, 단순히 따라 만드는 것을 넘어 UI를 직접 설계하고 구현해보는 경험에 집중했습니다.
작업 과정에서 협업과 소통을 우선으로 하였고, 팀원 각자가 주도적으로 의견을 나누고 조율하며 함께 성장할 수 있었습니다.
rem이라는 작은 단위처럼 보일 수 있는 저희의 노력을 모아, 하나의 완성된 결과물을 만들었습니다.
`[타입] 이름 / 내용`으로 작성한다.
세부 내역이 필요하다면 한 줄 띄어서 작성한다.
-로 각 항목을 구분하여 작성한다.
| type | description |
|---|---|
| [feat] | 새로운 기능 추가 |
| [bugFix] | 버그 수정 |
| [docs] | 문서의 수정 |
| [modify] | 코드 변경 |
| [refactor | 리팩토링 |
| [design] | CSS 등 사용자 UI 디자인 변경 |
| [comment] | 필요한 주석 추가 및 변경 |
| [style] | 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우 |
| [test] | 테스트(테스트 코드 추가, 수정, 삭제, 비즈니스 로직에 변경이 없는 경우) |
| [chore] | 빌드 수정, 패키지 매니저 설정, 운영 코드 변경이 없는 경우(assets image, 패키지 매니저 등) |
| [init] | 프로젝트 초기 생성 |
| [rename] | 파일 혹은 폴더명 수정하거나 옮기는 경우 |
| [remove] | 파일을 삭제하는 작업만 수행하는 경우 |
| [merge] | Pull 과정 중 현재 commit과 자동 병합이 일어날 때 |
| [build] | 새로운 라이브러리 혹은 패키지 |
각 구역별 가독성을 위해 시작 / 끝 영역을 표시해준다.
<!-- ST: header -->
<!-- ED: header -->
<!-- ST: 메뉴 리스트 -->
<!-- ED: 메뉴 리스트 -->
4px 단위가 아닌 수치들은 [rem]로 작성한다.
m-4 py-[.3125rem]
컴포넌트 파일은 src/components 폴더 하위에 생성하며 `component-메뉴명(컴포넌트명).html`으로 네이밍한다.
페이지 파일은 src/pages 폴더 하위에 생성하며 페이지명으로 네이밍한다.
컴포넌트 및 전체 페이지는 flex, 섹션별 레이아웃은 grid를 적용한다.
모바일 퍼스트로 작업한다.
반응형 breakpoint
- md: 640px ~ 1023px - lg: 1024px ~ 1499px - xl: 1500px ~
JS 주석: 함수나 중요한 로직에 대해서는 주석을 추가한다.
// 스크롤 이벤트 일시 중지 (1초 동안)
isScrollingDisabled = true;
setTimeout(() => {
isScrollingDisabled = false;
}, 1000);
public 정적 파일
src 동적 파일
1rem ├─
- 다같이 컴포넌트 껌으로 만들정도로 성장하기
- 한명도 소외되는 느낌 없이 마지막에 모두가 만족하는 결과 만들기
- 버거킹 먹고싶을정도로 만들기
1. 매일 오전 9시 30분에 모여 각자 진행률과 요청 사항, 이슈를 공유한다.
2. 매일 오후 5시 30분에 모여 회고를 진행한다.
3. 각자의 작업을 완료한 후 코드 리뷰를 요청한다.
4. Git을 사용하여 코드 변경 사항을 커밋하고 푸시한다.
5. 각자 맡은 업무의 우선순위를 명확히 하고, 그에 따라 진행한다.
6. 팀 내에서 발생한 문제는 즉시 공유하고, 해결 방안을 함께 모색한다.
7. 기능 추가나 변경 사항은 반드시 문서화하여 공유한다.
8. 프로젝트 일정에 맞춰 작업을 진행하고, 지연이 발생할 경우 미리 알려준다.
2025년 3월
29cm → 카드 형식 페이지
캐치테이블 → 카드 형식 + 반응형 디자인 적용
구글 플레이 → 카드형식 폼 활용 (빠른 완성 가능)
인프런 → 공통 컴포넌트 활용 (커뮤니티, 로그인 모달, 이벤트 페이지)
버거킹 → 시각적 요소 참고 (모달창, 유튜브 영상 삽입, 모달 버튼 디자인)
코스트코 → 카드 컴포넌트, 폰트 수정 (투박한 느낌 개선)
텀블버그 → 컴포넌트 방식 참고 (단, 임팩트가 부족)
Sonder → 목업 이미지 및 영상 필요
여행 서비스 → 레이아웃 구현 용이 (멀티 컬럼 구조 적용)
⇒ 버거킹 사이트로 결정
피그마 생성 → 프로젝트 UI 설계 시작
페이지 정리 → 구성 요소 및 레이아웃 정리
컴포넌트 단위 나누기 → 재사용 가능한 UI 설계
변수 정리 및 확인 → Tailwind CSS 변수, 전역 스타일 정의
피그마 시안 작업 → 실제 구현할 디자인 확정
스프린트 작성 → 작업 일정 및 목표 설정
테일윈드 정리 → 클래스 구조 최적화 및 유지보수성 향상
커밋 컨벤션 정리 → Git 커밋 규칙 수립 및 적용
배포 연습 → 실제 배포 환경 테스트
⇒ 유사 페이지 및 난이도를 고려하여 분배함
a. 메인 페이지
b. MENU, NEWS, STORE
c. CUSTOMER, 가맹점 모집, 약관 컴포넌트 작업
d. STORY 하위 메뉴 페이지
webp 포맷 최적화 검토 → 투명도 유지 여부 확인
이미지 파일 형식 변경 → SVG 제외 모든 이미지 webp 변환
이미지 파일명 통일 → 규칙 정해서 정리
폰트 및 색상 변수 설정 → font-size, color 전역 변수 생성
Prettier 초기 설정 → 코드 스타일 규칙 정리 및 적용
담당할 페이지 나누기 → 팀원별 작업 분배
공통 버튼 컴포넌트 만들기 → 일관된 UI 적용
참고할 디자인 및 레이아웃 찾기
필수 포함 요소: 메인 페이지, 컴포넌트 모음 페이지, 안내 모달창
컴포넌트 및 전체 페이지 → flex 적용
섹션별 레이아웃 규칙 → grid 활용
페이지 별 컴포넌트: component-{페이지}.html
공통 컴포넌트: common-{컴포넌트명}.html
- 페이지별 컴포넌트 분리하여 제작 중
- 이미지 네이밍 및 webp 변환
- 고객지원 페이지, 자주 묻는 질문(FAQ) 등 주요 컴포넌트 작업
- 공통 컴포넌트 작업 중
- 구조 마크업 진행 중
- 헤더 애니메이션 및 스크립트 작업 필요
- 모바일 환경에서는 display: none, header index 따로 작업
각자 아이디어 구상 후 공유
페이지 작업을 먼저 끝낸 사람이 인덱스 페이지 작업 시작
모달창, 각 컴포넌트 페이지, home.html, 컨벤션 문서, 스크럼 회의 기록, GitHub 저장소 링크, 팀원 소개 페이지, 회고/소감
- MENU 컴포넌트 작업 완료
- 메뉴 상세 페이지 컴포넌트 추가 작업 진행 중 (반응형 추가 수정 필요)
- NEWS, STORE 컴포넌트 작업 진행 중
- 가맹 신청서 컴포넌트 작업 완료
- 공통 컴포넌트 작업 완료
- STORY 컴포넌트 작업 진행 중
- 메인 페이지 광고영상 컴포넌트 작업 완료
- 메뉴 및 매장 소개, Why 버거킹 컴포넌트 작업 완료
- 고객과 함께 성장하는 버거킹 컴포넌트 작업 완료
- MENU 컴포넌트 완성
- 약관 5종, Q&A 컴포넌트 작업 완성
- 광고영상 모달 컴포넌트 작업 완성
- 컴포넌트 점검 후 필요하면 황유빈님과 협업하여 추가 작업 진행
- 공통 헤더, 메인 배너 수정. 주석처리 및 라벨 추가
- 푸터 작업 예정
충돌 발생 시 팀원들과 함께 해결
- MENU 컴포넌트 작업 완료
- NEWS 컴포넌트 진행 중
- CUSTOMER 컴포넌트 작업 완료
- 페이지 작업 시작
- STORY 하위 페이지 컴포넌트 작업 완료
- MAIN 컴포넌트 작업 완료
- NEWS 컴포넌트 작업 완료
- 백업 필요 여부 확인 후 페이지 작업 이어서 진행
- 푸터 백업, STORY 페이지 작업 시작
- 탑 배너(반응형 적용하여 제작), 인디케이터 모양 제작, 헤더-서브메뉴 구현
h1: 로고, h2: 페이지별 제목, h3: 컴포넌트
- NEWS 상세페이지 작업 진행 중
- CUSTOMER 페이지, qa_list 페이지 완료 (js 제외)
- STORY 브랜드 지도 부분까지 완료
- header 작업 pr
- main.js 작업
- 전체 페이지 마크업 완료
- 접근성, 완성도 신경 쓰기
- 약관 모달 → 페이지로 빼기
- 상세 페이지 3-4개 제작
- franchise 페이지 작업 완료
- STORY 하위 페이지 작업 완료
- 헤더 sticky 설정하고 url 연결
- 컴포넌트 코딩 컨벤션과 접근성 확인
- main page 제작
page vs pages ⇒ page 사용하기
- 메뉴 nav active → hover로 수정
- 페이지 전체 작업 완료, 디테일 수정 중
- 모달창 작업 중
- 이용약관, 위치정보이용약관, 법적고지 완료
- button → a로 수정 완료
- 모집 폼 레이아웃 작업 중
- story → 광고영상 모달창 관련 스크립트 처리
- header, footer 웹 컴포넌트 작업 및 적용
- footer 영역 모달창 관련 작업 완료
- 메인 페이지 제작 완료
- 접근성 수정 중
- 상세 페이지 제작 완료
- 모달창 작업 완료
- 약관 5종 완료
- news 상세페이지 3-4개 제작
- 전체 페이지 테스트 시작
- footer slide 제작
로고, 파비콘 만들기
focus outline 색상 변경
- event-detail 이미지 수정 완료
- event 메뉴 경로 수정 완료
- 문서 작업 중
- 전체 test 진행중
- index 메인 팀소개 xl 설정
- 페이지 및 컴포넌트 소개 그리드 제작
- 모달창 디테일 수정
- 뉴스 sticky 부분 수정
- 메뉴 상세 수정
- index 페이지 문서화 부분 수정하기
- readme 수정하기
- 팀 소개 멘트 및 회고록 작성 예정
- vite.config 수정 예정
- 컴포넌트 페이지 통일감 있게 수정 예정
- 전체 페이지 title 수정
- index 팀소개 이미지 추가
- index 그리드 배열 수정
- 폰트 수정
멋사 프론트엔드 부트캠프 13기에서 처음으로 경험한 프로젝트여서 기대도 높았지만 긴장도 많이 됐던 시간이였습니다. 특별히 팀장, 스크럼마스터를 맡으면서 처음만난 팀원들을 리딩한다는 생각에 책임감도 생겼지만 그만큼 부담감이 컸습니다. 좋은 팀원들을 만나 서로간에 트러블도 하나 없이 마무리 할 수 있었음에 감사하고, 혹시나 넘치는 책임감에 조급해져서 팀원들에게 알게모르게 부담과 상처를 주지는 않았나 돌아보게 됩니다.
저는 이 프로젝트에서 '완성'도 중요하지만 '협업'이 더 중요하다고 생각하고 작업하였습니다. UI를 만들어 내고 설계하는 능력은 혼자서도 공부할 수 있지만, 협업은 이렇게 팀 프로젝트에서만 배울 수 있는 것이라 더 소중했습니다.
서로간의 작업물을 합치고 테스트하고 리팩토링하면서 내가 짠 코드가 아니다보니 어려움이 느껴졌었는데 '같은 강사님께 배워도 다 코드짜는 스타일이 다르구나'하는 생각이 들었습니다. 현업에 간다면 더욱 더 다른 스타일의 코드들과 레거시 코드들을 만나게 될 것을 생각하니 기본부터 잘 배우고 익혀야겠다는 생각이 커졌습니다.
이번의 프로젝트의 모든 부분이 만족스럽지는 않지만 팀원들과 함께 해냈기에 값진 결과물로 여겨집니다. 소중한 10일간의 경험을 함께해준 1rem;팀 감사합니다!^^
03-14
오늘은 드디어 첫 프로젝트의 시작인 하루이다. 팀 발표와 깃 조직을 만들고 클론까지 하니 이제서야 팀 프로젝트를 진행하는 느낌이 든다. 아직까지는 제대로 잡혀진 설계와 계획이 없지만 어떤 사이트를 제작하고 디자인을 하게 될지 긴장과 설렘이 동시에 몰려온다. 책임감을 가지고 팀원으로 1인분의 역할을 충실히 해내야지. 아 이번 팀장은 사다리 타지 말자고 해야지.
03-21
프로젝트를 시작하고 벌써 7일이나 지났다. 처음 공통 라벨을 제작하는 것도 힘들었는데 이제는 마크업과 함께 제작하려니 생각보다 속도가 나지 않았다. 그래도 팀장님의 예시가 내게 정말 큰 도움이 되었다. 이번 프로젝트에서 코딩 컨벤션, 커밋 컨벤션 기존 프로젝트에서는 사용하지 않았던 룰을 적용하고 제작하는게 왜이리 어색한지 자꾸 놓치게 되었다. 중간에 강사님이 기존에 하던 클론코딩은 도움이 안된다고 하시던 말이 크게 와닿았다. 팀원들과 이것저것 소통하고 문제가 발생하였을때 혼자 해결하는게 아닌
다 같이 화면을 공유하고 해결해 나가니 이후에 나타난 같은 오류에서 해결하기 수월했고, 깃 소스 제어에서 큰 사고가 안나게 한 방식이지 않았을까 한다. 이제 곧 마지막이니 더 열심히 달려봐야지.
03-21 - 03-24
지금은 프로젝트를 마감 하루 전인 24일의 회고록이다. 아마 오늘도 야근이겠지만, 지금까지 만든 것들을 합치고 수정하고 index 페이지까지 꾸미니 어느정도 포트폴리오? 형식의 느낌이 들기 시작한다. 페이지를 조립하고 완성본들을 수정하면서 느낀거지만 나는 디자인에 눈이 정말 없는 듯하다.. 높이가 다른거나 조금씩 색상이 다른게 왜 눈에 들어오지 않는지 그냥 보기 싫은걸지도.. 버거킹이 왜이리 보기가 싫죠? 이제 배포까지 끝마치고 마지막 인덱스 수정과 페이지들의 테스트만이 남았다. 분명 짧은 시간은
아니였을 텐데 순식간에 10일의 시간이 흘렀갔다. 아직까지는 마감을 지키기위해 속도전으로 제작하고 정신없게 하다보니 코딩 컨벤션도 그렇고 접근성도 그렇고 엉망진창이란 생각이 마지막 점검에서 들었다. 프로젝트 마지막에서야 보이는 문제점들을 내가 고쳐나가지 않으면 분명 다음 프로젝트에서도 마찬가지 일테니 반성하고 고쳐나가야 한다.
첫 프로젝트를 시작하기 전, 팀원들에게 민폐를 끼치지 않고 잘 따라갈 수 있을지 걱정이 앞섰다. 다행히 좋은 팀원들을 만나 프로젝트 기간 동안 많은 것을 배울 수 있었다.
혼자 코드를 작성할 때는 놓쳤던 부분들을 다른 팀원들의 마크업 방식과 레이아웃을 비교하면서 내가 부족했던 부분들을 발견하고 배울 수 있었다. 프로젝트 시작 전 내 목표는 맡은 부분을 스스로 해내는 것이었다.
마크업부터 CSS까지 혼자 제작하려니 시간이 많이 걸리고 조급한 마음이 들었지만, 팀원들의 도움으로 수정해가며 더 깊게 학습할 수 있는 시간이 되었다. 비록 완벽하게 목표를 이루지는 못했지만, 함께 작업하면서 한 단계 성장했음을 느꼈다. 이 과정에서 프로젝트를 하면서 보이지 않는 곳, 작고 세세한 것까지 놓치지 않는 것이 중요하다고 느꼈다. 사용자 경험에 영향을 미치는 미세한 애니메이션이나 반응형 디자인의 세부 사항들이 전체 프로젝트의 완성도를 좌우한다는 것을 깨달았다. 이런 세심한 부분들은
처음에는 쉽게 간과했지만, 팀원들의 꼼꼼한 작업 방식을 보며 디테일의 중요성을 배울 수 있었다.
이번 프로젝트를 통해 혼자 작업할 때보다 팀으로 협업하는 과정에서 더 많은 것을 배울 수 있다는 것을 깨달았다. 특히 코드 리뷰를 통해 다른 사람의 시선으로 내 코드를 바라보는 경험은 매우 소중했다. 처음에는 내 코드를 보여주는 것이 부끄럽고 두렵기도 했지만, 팀원들의 피드백 덕분에 더 성장할 수 있었다.
앞으로의 프로젝트에서는 이번에 배운 경험을 토대로 더 효율적으로 작업을해야겠다. 또한 다른 팀원들에게 도움을 요청하는 것을 주저하지 않고, 나도 다른 동료들에게 도움이 될 수 있도록 더욱 학습하고 성장해야겠다. 아주 즐겁고 소중한 첫프로젝트였다!
첫 클론 사이트 개발이었고, 첫 배포 경험이었습니다.
설계 단계부터 반응형 디자인을 중점적으로 고려했지만, 배포 후 실제 모바일 환경에서 테스트하면서 예상보다 더 많은 부분을 신경 써야 한다는 것을 깨달았습니다. 모바일의 작은 화면에 맞는 레이아웃 조정이나 크기 변경 등이 필요했고, 반응형 디자인을 더욱 세밀하게 다뤄야 했습니다.
프로젝트를 진행하며 접근성 문제에 대해서도 많은 것을 느꼈습니다. 단순히 웹사이트가 잘 작동하는 것뿐만 아니라, 시각이나 청각에 제약이 있는 사용자가 접근할 수 있도록 하는 것이 필수적이라는 점을 다시 한 번 깨닫게 되었습니다. aria 속성이나 키보드 네비게이션 등 개선할 점이 많았지만, 완벽하게 반영되지 못해 아쉬움이 남습니다. 향후에는 접근성을 보다 철저히 고려하여 누구나 쉽게 이용할 수 있는 웹사이트를 만들겠다는 목표가 생겼습니다.
특히, 좋은 팀원들을 만나서 많은 것을 배웠습니다. 서로 협력하면서 역할을 나누고, 피드백을 주고받으며 진행한 과정이 정말 소중했습니다. 매일 늦은 밤까지 열심히 작업하는 팀원들이 보여준 노력과 열정 덕분에 프로젝트가 원활히 진행될 수 있었고, 함께 문제를 해결하는 과정에서 많은 경험을 쌓을 수 있었습니다.
이번 프로젝트 경험을 통해 많은 것을 배웠습니다. 이 경험을 기반으로 더 나은 프론트엔드 개발자가 되기 위해 노력하겠습니다. 1rem;에서의 모든 경험이 앞으로의 저에게 큰 도움이 될 것이라 믿습니다.
1rem; 팀원들 더 높은 곳에서 만납시다!!