Sashimi

UI를 정교하게 가른다!
그리하여 사.시.미

사시미 == 4人의 시선 + 미(美)의 감각
팀 사시미는 4명의 미적 감각으로 티빙 UI를 정교하게 재현하는 팀입니다.

Header
component Footer
component Main
component Landing
component Account
component Search
component Profile
component Modal
component Layout
component

🧱 HTML/CSS 네이밍 규칙

🔔 id 보다는 class 사용을 권장. id는 고유성으로 인해 스타일 재사용 및 유지보수에 불리
  • id → camelCase / 예 : userCard, scrollTarget
  • class → kebab-case / 예 : main-banner, card-item
  • 파일명, 폴더명, 이미지명 → kebab-case / 예 : user-profile.js, img-folder/

🎨 스타일링 원칙

  • 색상, 폰트, 크기 등은 변수로 관리 → CSS 변수 또는 SCSS 변수 사용 / 예 : root { --main-color: #1e90ff; --font-heading: 'Pretendard', sans-serif; }
  • 아이콘/일러스트는 .svg + <img> 태그 활용 → 브라우저 최적화 및 동적 스타일링에 유리
  • 반응형 이미지 처리 -> picture 태그 대신 background-image 속성을 선호 -> CSS/JS에서 제어 및 리팩토링이 쉬움

🧩 Git 커밋 메시지 컨벤션

이모지 타입 설명
✨ feat 새로운 기능 추가
🐛 bugFix 버그 수정
📚 docs 문서 수정
✏️ modify 기능 변경을 포함한 코드 수정
♻️ refactor 리팩토링 (동작 변화 없음)
🎨 design CSS 등 UI 관련 변경
💡 comment 주석 추가 및 수정
💅 style 코드 포맷, 공백, 세미콜론 등 포맷팅
🧪 test 테스트 코드 관련 작업
⚙️ chore 빌드, 패키지 설정 등 운영 코드 작업
🚀 init 초기 프로젝트 세팅
🚚 rename 파일 또는 폴더명 변경
🗑️ remove 파일 삭제
🔀 merge 브랜치 병합 시 사용
🏗️ build 라이브러리, 패키지 설치
♿️ accessibility 접근성 관련 코드 작업
✅ 형식 예시

  • ✨ feat : 로그인 기능 구현
  • ♻️ refactor : 카드 컴포넌트 구조 개선

🌿 Git 브랜치 전략

  • main → 실제 배포에 사용되는 최종 브랜치
  • develop → 여러 기능 브랜치를 통합하는 개발 브랜치
  • feature/기능명 → 단위 작업 브랜치 / 예시 : feature/signup-form, feature/product-list

📚 추가 가이드라인

  • 접근성 : 시맨틱 태그 + WAI-ARIA 속성 적극 사용
  • 주석 작성 : 복잡하거나 비직관적인 로직에는 주석 필수
  • 파일 구조 : 기능 단위로 폴더 구조를 설계해 유지보수성 확보
  • 코드 리뷰 : 모든 PR은 최소 1명 이상의 리뷰 후 머지

Day 1 Daily Scrum

프로젝트 초기 세팅 및 역할 분배, 본격적인 작업 전 구조와 운영 체계를 정비한 날
  • ✅ PR 커밋 규칙 정의 및 GitHub 협업 환경 정리
  • ✅ WIKI 홈 구조 설계 및 작성 시작
  • ✅ 백로그 항목 구체화, 이슈 템플릿 작성 및 라벨 분류
  • ✅ 작업 파트를 명확하게 분배하여 각자 맡을 페이지 정의
  • ✅ 디스코드 & 깃허브 Webhook 연동으로 실시간 협업 알림 구축
  • ✅ 공통 폴더 구조 및 초기 파일 세팅 완료

Day 2 Daily Scrum

개별 컴포넌트 마크업 & 스타일링 시작
  • 👨‍💻 박민성

    로그인 폼 UI 요소 마크업 및 스타일링

    반응형 고려한 구조 설계

  • 👨‍🎨 조장원

    메인 페이지 레이아웃 설계

    마크업 및 스타일링 진행

  • 👩‍💻 전지연

    랜딩 페이지 아이콘 및 이미지 추가

    전체 마크업과 스타일링 구성

  • 👩‍🔧 장효정

    헤더 컴포넌트 시맨틱 마크업 및 스타일링

    반응형 적용 완료

Day 3 Daily Scrum

리팩토링 & 페이지 구조 심화 작업
  • 👨‍💻 박민성

    로그인 컴포넌트 리팩토링 및 접근성 개선

    모달 컴포넌트 마크업 및 스타일링

  • 👨‍🎨 조장원

    메인 페이지 구조 및 스타일 수정

    Search 컴포넌트 추가 및 구성

  • 👩‍💻 전지연

    랜딩 페이지 마무리 스타일링

    프로필 컴포넌트 마크업 및 편집 기능 UI 구성

  • 👩‍🔧 장효정

    헤더 스타일 개선

    푸터 컴포넌트 기본 구조 및 스타일링

Day 4 Daily Scrum

전체 구조 정리 및 본격 페이지 제작 돌입
  • 🤝 공통 작업

    전체 코드 PR 및 병합 (develop → main)

    전체 레이아웃 구조 설계 회의

    컴포넌트 통일 및 리팩토링

  • 👨‍💻 박민성

    로그인 페이지 본격 제작 시작

  • 👨‍🎨 조장원

    메인 페이지 콘텐츠 구성 및 제작 시작

  • 👩‍💻 전지연

    랜딩 페이지 구조 개선 및 제작 시작

  • 👩‍🔧 장효정

    프로필 페이지 레이아웃 설계 및 마크업 시작

Day 5 Daily Scrum

인덱스 레이아웃 구성 및 전체 코드 리팩토링
  • 🤝 공통 작업

    인덱스 페이지 레이아웃 시각적 통일

    코드 develop 브랜치 병합

    WIKI 문서 정리 및 수정

    페이지별 코드 리뷰 및 피드백 반영

    전체 레이아웃/컴포넌트 구조 리팩토링

  • 👨‍💻 박민성

    로그인 & 모달 컴포넌트 리팩토링

  • 👨‍🎨 조장원

    메인 & 검색 페이지 정리 및 UI 개선

  • 👩‍💻 전지연

    프로필/랜딩 페이지 구조 정리 및 스타일링

  • 👩‍🔧 장효정

    헤더/푸터 시맨틱 마크업 정비 및 반응형 대응

Day 6 Daily Scrum

인덱스 workflow 영역 제작
  • 🤝 공통 작업

    인덱스 workflow 구성 회의

  • 👨‍💻 박민성

    workflow - convention 영역 제작

  • 👨‍🎨 조장원

    workflow - 레이아웃 세팅

  • 👩‍💻 전지연

    workflow - scrum 영역 제작

  • 👩‍🔧 장효정

    workflow - timeline 영역 제작

Day 7 Daily Scrum

프로젝트 최종 완성 및 마무리
  • 🤝 공통 작업

    각 페이지에 들어갈 시행착오 내용 총 정리

    발표 내용 검수 및 수정 작업

    전체 페이지 크로스브라우징 체크

  • 👨‍💻 박민성

    이미지 파일 최적화를 위해 npm을 활용한 변환 작업

  • 👨‍🎨 조장원

    인덱스 반응형 처리 및 푸터 추가

  • 👩‍💻 전지연

    랜딩에 비상업적임 명시하는 모달 추가

  • 👩‍🔧 장효정

    각 페이지 프로토타입 처리

  • 👨‍💻 조장원 이번 프로젝트에서 리더 역할을 맡게 된 것은, 평소 앞장서서 무언가를 책임지는 데에 익숙하지 않았던 저에게 큰 부담으로 다가왔습니다. 하지만 언젠가는 꼭 맡게 될 역할이라고 생각했고, 이왕 하게 된 이상 제대로 해보자는 마음가짐으로 프로젝트가 원활히 진행될 수 있도록 많은 부분에 신경 쓰며 임했습니다.
    무엇보다도 저의 부족한 점을 이해해주고 적극적으로 도와준 훌륭한 팀원들 덕분에 프로젝트를 매끄럽게 마무리할 수 있었다고 생각합니다.

    이번 프로젝트 경험을 통해 Git과 GitHub를 활용한 협업 방식에 대해 익힐 수 있었던 것도 큰 수확이었지만, 그보다 더 크게 느껴졌던 점은 ‘완벽한 팀’을 만드는 데 있어 가장 중요한 것은 각자 맡은 역할에 최선을 다하는 것이라는 사실이었습니다.

    부족한 리더를 믿고 잘 따라와 준 팀원들에게 다시 한 번 진심으로 감사의 말씀을 전합니다.
  • 👨‍💻 박민성 길었다면 길었고 짧다면 생각보다 훨씬 짧았었던 첫 UI프로젝트..
    최종 한줄평을 먼저 말해보자면 "생각보단 스무스?했던 프로젝트" 라고 정리할 수 있을것 같다.

    멋사 부트캠프를 하며 처음으로 하는 팀프로젝트였던 만큼 회고조가 아닌 또 새로운 사람들과 팀을 맺어 협업을 할 생각에 살짝 설레면서도 머리가 지끈지끈 거리는 모순?적인 기분이 들었다!

    사실 난 전공자출신에다 협업경험이 있음에도 불구하고 html,css 기초가 약해서 js나 다른 프레임워크 없이 순수 html, css 로만 구현해야하는 UI프로젝트에서 팀원들에게 민폐를 끼치지 않을까 걱정이 제법 되었었다.

    하지만 정말 다행히 운이좋게도 기초가 튼튼하고 화려한 스펙의 팀장님과 팀원분들을 만난덕에 서로가 서로에게 부족한 부분을 채워주며 이끌어 나갈 수 있어서 이 부분이 정말 좋았었다.

    일주일이 살짝 넘는 시간동안 4명이서 함께 협업하여 UI프로젝트를 완성하는 그 일련의 모든 시간과 과정속에서 매우 많은 시행착오와 의견충돌 등이 있었지만 Ai나 구글링의 도움뿐만 아니라 자신의 경험을 토대로 서로가 서로를 보완하며 이끌어 나아갔기에 생각보다 프로젝트 일정이 빡빡하지도 않았고 스무스하게 완성까지 나아갈 수 있었다고 생각이 든다.

    그리고 나 또한 이번 UI프로젝트를 하며 정말 느낀것이 많았는데 react나 next같은 프레임워크에 너무 익숙해진 나머지 html과 css 등 프론트엔드의 기초라 할 수 있는 부분을 게을리하여 부족했던 나의 기초가 너무 체감이 확 되었었다...

    하지만 이번 프로젝트를하며 부족한 부분에선 강사님과 팀원분들에게 피드백도 받으면서 정말로 간만에 초심으로 돌아가 다시한번 html의 마크업 단계부터 시멘틱한 구조나 접근성 관련 부분부터 아주아주 고민하면서 또 다시 생각해보고 구현해보는 시간이 되어서 정말 좋았다!

    내일 있을 최종발표도 잘 마무리 되었으면 좋겠고 짧지만서도 일주일간 함께 좌충우돌? 했었던 팀원분들과 헤어진다는 점은 좀 아쉽지만 그래도 프로젝트를 깔끔하게 완성하였기에 해산하는 것이니까.. 아무튼 다시한번 함께해준 모든 팀원분들께 너무 고마운것 같다.
  • 👨‍💻 장효정 HTML과 CSS를 처음 배운 게 엊그제 같은데, 벌써 UI 프로젝트의 마지막을 준비하고 있다는 게 믿기지 않을 만큼 시간은 빠르게 지나갔습니다.
    수업 시간 실습도 겨우 따라가던 저에게 이번 프로젝트는 사실 부담으로 다가왔습니다.

    하지만 좋은 팀원들을 만나, 기능을 하나하나 구현해가며 차근차근 단계를 밟다 보니 어느새 팀의 일원으로서 맡은 바를 다하고, 발표까지 책임지는 제 모습을 발견할 수 있었습니다.

    사실 저는 발표라는 걸 세상에서 제일 어려워하는 사람이었고, 특히 잘 알지 못하는 분야를 다른 사람들 앞에서 설명해야 한다는 건 큰 도전이었습니다. 하지만 언젠가는 꼭 넘어야 할 산이라고 생각했고, 무엇보다 팀원들의 응원과 믿음이 있었기에 이 과정을 무사히 헤쳐올 수 있었습니다.

    물론 아직 많이 부족하지만, 이번 프로젝트를 통해 협업의 과정을 직접 경험하고 작은 시행착오 속에서 성장하는 즐거움을 배울 수 있었던 소중한 시간이었다고 생각합니다.

    앞으로도 이런 경험들을 발판 삼아, 팀과 함께 성장할 수 있는 프론트엔드 개발자로 나아가고 싶습니다.
  • 👨‍💻 전지연 나는 랜딩 컴포넌트, 프로필 컴포넌트, 랜딩 페이지를 맡았는데, 이번 프로젝트는 인생 첫 웹 프로젝트였다. (배포도 완전 처음..!) 그래서 1인분도 못 해내고 민폐를 끼칠까 봐 너무 걱정됐다.

    프로젝트를 진행하다 보니 생긴 문제를 어떻게 해결해야 하는지 방법을 찾아봤을 때, 배운 내용들이 대부분이었고, 그것들을 내가 다 체득하지 못했다고 생각했다.그래서 계속 부딪혀보면서 왜 이런 문제가 생기는지 이럴 땐 어떻게 적용하는 게 좋은지를 다시 머릿속에 하나씩 정리해 나가며 계속 부딪혀보면서 문제 해결 능력을 키울 수 있었다.

    그리고 PR 생성부터 코드 리뷰, 수정, approve, 머지까지 일련의 과정을 거치면서, 내 코드에 대한 주석과 설명이 얼마나 중요한지 알게 됐다. 팀원들이 내 코드를 이해하고, 문제점을 파악하고, 개선 방향을 제시하려면 상세한 설명이 필수라는 걸 느끼게 되었고, 앞으로는 코드 작성 시 주석을 꼼꼼하게 달고, 팀원들이 쉽게 이해할 수 있도록 설명하는 습관을 들여야겠다고 다짐했다.

    그리고 프로젝트를 진행하면서 고려해야 할 사항이 너무 많아서 헷갈리는 일도 많았지만, 팀원들과 끊임없이 소통하면서 문제를 해결하고 조율해 나가니 점점 더 나아지는 걸 느꼈다. (너무 좋은 팀원들과 함께였기에 영차영차해서 문제를 해결해 나가며 한층 더 성장한 것 같다!)

    이번 경험을 통해 협업의 중요성과 문제 해결 능력을 키울 수 있었고, 앞으로 더 성장하는 개발자가 되기 위해 계속해서 꾸준히 노력해야겠다!!!!

2025-05-27 (Day 1)

공통 구조 설계와 초기 세팅을 완료하며, 효율적인 협업을 위한 기반을 마련한 날
  • ✅ 프로젝트 전체 구조 설계 및 컴포넌트 아키텍처 정의
  • ✅ 주요 페이지별 컴포넌트 초기 설정 (landing, main, header/footer, account 등)
  • ✅ 개발 환경 구축 및 협업 도구 세팅
  • ✅ 팀원별 담당 영역 분배 및 작업 가이드라인 수립
  • ✅ WIKI 구성 방향 논의 및 협업 규칙 정리
  • ✅ PR/커밋 컨벤션 정리 및 이슈 템플릿, 라벨 분류 작업

2025-05-28 (Day 2)

디자인 시안에 맞춰 각 컴포넌트의 마크업을 시작하고, 팀 작업 방식에 익숙해진 날
  • ✅ 레이아웃 및 로그인 컴포넌트 기본 구조 구현
  • ✅ 헤더 컴포넌트 CSS 작성 및 아이콘 리소스 준비
  • ✅ 메인 페이지 마크업 및 링크 에러 수정
  • ✅ 랜딩 페이지 컴포넌트 기본 틀 완성

2025-05-29 (Day 3)

스타일링 세부 조정과 접근성 이슈를 점검하며, 마크업 완성도를 높인 날
  • ✅ 헤더 컴포넌트 코드 리팩토링 및 불필요한 코드 제거
  • ✅ 로그인 컴포넌트 접근성 개선 및 aria-label 추가
  • ✅ 푸터 컴포넌트 신규 생성 및 디자인 시스템 적용
  • ✅ 프로필 및 검색 컴포넌트 마크업 완성
  • ✅ 이미지 경로 최적화 및 스타일 통합

2025-05-30 (Day 4)

페이지 단위 스타일링과 마크업을 마무리하고, 모달 기능 구현에 착수한 날
  • ✅ footer 영역 개선 및 스타일 조정
  • ✅ 모달 컴포넌트 리팩토링 및 메인 페이지 연동
  • ✅ 크로스브라우징 테스트 및 이슈 대응
  • ✅ 전체 페이지 마크업 및 스타일링 완료

2025-05-31 (Day 5)

전체 UI 정리를 위한 리팩토링과 접근성 점검을 본격적으로 수행한 날
  • ✅ header, main, search 코드 정리 및 스타일 통일
  • ✅ 접근성 점검 항목 수정 및 시맨틱 태그 보완
  • ✅ 페이지 간 스타일 일관성 유지 위한 리팩토링
  • ✅ 모달 UI 및 기능 개선 작업 지속

2025-06-01 (Day 6)

슬라이드 기능과 동적 콘텐츠 구현으로 사용자 인터랙션을 강화한 날
  • ✅ 메인 페이지 콘텐츠 슬라이드 기능(jQuery 기반) 구현
  • ✅ 레이아웃 세부 조정 및 헤더 컴포넌트 개선
  • ✅ 검색 페이지 컴포넌트 조립 및 기능 구현
  • ✅ 모달 및 레이아웃 마무리 작업

2025-06-02 (Day 7)

전체 페이지 리팩토링과 컴포넌트 접근성 향상 작업에 집중한 날
  • ✅ 전체 페이지 컴포넌트 코드 리팩토링
  • ✅ 컴포넌트 간 일관성 확보 및 성능 최적화
  • ✅ 검색 페이지 마크업 및 스타일링 완료
  • ✅ 헤더/푸터 공통 컴포넌트 최종 정리
  • ✅ index 페이지 탭 레이아웃, 마크업, 스타일 구성 시작

2025-06-03 (Day 8)

프로젝트 문서화를 진행하고, 인덱스 페이지 구조를 체계화한 날
  • ✅ 인덱스 랜딩 페이지 레이아웃 설계
  • ✅ 스크럼 관리 컴포넌트 마크업 및 스타일링
  • ✅ 프로젝트 전체 인덱스 페이지 완성

2025-06-04 (Day 9)

페이지 프로토타입과 인덱스를 완성한 날
  • ✅ 인덱스 랜딩 페이지 반응형 구현 및 최종 완성
  • ✅ 페이지 프로토타입 흐름 구체화
  • ✅ .png 이미지 파일 .avif 변환 및 적용
  • ✅ 전체 페이지 크로스브라우징 체크
  • ✅ 발표준비 및 리허설
Copyright © 2025 Shshimi. All rights reserved.