Home
| 이름 | 역할 | MBTI |
|---|---|---|
| 안동원 | 팀장 | ISFP |
| 우혜리 | 팀원 | INFP |
| 이형민 | 팀원 | INTP |
| 홍민영 | 팀원 | ENFP |
우리 팀은 이번 UI 프로젝트를 통해 실제 운영 중인 웹 서비스(블루보틀, 이디야)의 사용자 인터페이스를 분석하고,
이를 재사용 가능하고 효율적인 컴포넌트 단위로 설계 및 구현하는 경험 을 쌓는 것을 주 목표로 합니다.
최종적으로는 이 컴포넌트들을 조합하여 기능하는 페이지를 일부 시연하고자 합니다.
아래는 구체적인 내용입니다.
- 참고 서비스: 블루보틀(Bluebottle) 및 이디야(Ediya) 공식 홈페이지 및 이디야(Ediya) Figma시안.
- 도출된 UI 요소들을 아토믹 디자인(Atomic Design) 방법론에 따라 기능별 또는 크기별로 분류.
- 각 컴포넌트의 재사용성과 확장성을 고려하여 설계.
- 구현된 컴포넌트들을 조합하여 참고 서비스의 주요 페이지 중 일부를 실제로 구성.
- 커스텀 프로퍼티의 적극적인 활용으로 컴포넌트화 가속.
- 웹 접근성 및 웹 표준 준수.(키보드 사용자 및 SR리더기 사용자의 사용성 구축)
- lighthouse를 이용한 퍼포먼스 점수 관리.(최소 90점 이상이 목표)
- 문법오류는 일절 없도록 할 것.(w3.org 및 크롬확장프로그램 활용)
미디어 쿼리를 활용한 반응형 웹, 마우스오버/클릭이벤트/슬라이드/애니메이션 기능 구현.
멋쟁이 사자처럼 부트캠프 14기 9조 119 UI프로젝트
UI-PROJECT/ (프로젝트 루트)
├── public/
│ ├── favicon/
│ └── font/
├── src/
│ ├── assets/
│ ├── Bluebottle-component/ (블루보틀 서비스 관련 컴포넌트 및 페이지)
│ ├── common/ (커스텀 프로퍼티, 버튼 컴포넌트)
│ ├── css/
│ ├── Ediya-component/ (이디야 서비스 관련 컴포넌트 및 페이지)
│ ├── html/ (블루보틀 메인 페이지 파일)
│ └── styles/
├── .gitignore
├── index.html (메인 HTML 파일 - Vite 등의 시작점)
├── package.json
├── vite.config.js
└── README.md
커밋 메세지 + 이슈번호
🎉 [init] 초기 설정
🎨 [feat] 기능 추가, 변경
🔥 [remove] 파일이나 코드 삭제
🐛 [fix] 버그, 오류 수정
📝 [docs] readme.md, json 파일 등 수정, 라이브러리 설치 (문서 관련, 코드 수정 없음)
💄 [style] CSS 등 사용자 UI 디자인 변경 (제품 코드 수정 발생, 코드 형식, 정렬, 주석 등의 변경)
♻️ [refactor] 코드 리팩토링
🧪 [test] 테스트 코드 추가, 삭제, 변경 등 (코드 수정 없음, 테스트 코드에 관련된 모든 변경에 해당)
🐎 [ci] npm 모듈 설치 등
🐳 [chore] 패키지 매니저 설정할 경우, etc 등
예시: 로그인 페이지 파일을 삭제한 경우
git commit -m "[remove]로그인페이지 파일 삭제 "
기본규칙 : Type/작업-페이지_혹은_기능/Initials
- 문자 작성시 케밥 케이스(kebab-case) 사용
- 띄어쓰기 작성시 언더바(_) 활용
Type: 작업의 종류를 나타내는 접두사 (아래 예시 참고)(첫 문자는 대문자로 함)
- Feature
- Refactoring
- Bug
작업-페이지_혹은_기능: 작업이 이루어지는 주요 페이지, 기능과 간략한 설명
Initials: 작업자 영문 이니셜 (아래 예시 참고)(첫 문자는 대문자로 함)
예시:
Refactoring/slide-component/Woo
Feature/home/card-slider/Hong
시맨틱 마크업: 요소는 의미에 맞게 사용 (예: <a>와 <button>의 구별). <img>와 css의 백그라운드 이미지의 구분
웹 접근성 준수: 이미지 alt 속성, <label>과 input 연동 등 기본 사항 지키기.
표기법: 케밥 케이스(kebab-case) + 소문자 사용. (예: product-card)
주요 컴포넌트 접두사/접미사:
- 프로젝트의 기본 레이아웃 계층구조는 Wrapper > Container > List/Card > Item으로 설정하고, 계층 관계를 쉽게 알 수 있게 이름을 구체적으로 적습니다.
- 목록 컨테이너 (
<ul>,<ol>,<dl>): list-[역할] (예: list-products) - 목록 아이템 (
<li>,<dt>,<dd>): item-[역할] (예: item-product) - 버튼 (
<button>,<a>): btn-[종류] (예: btn-outline) - 카드형(이미지+텍스트)UI: card-[종류] (예: card-notification)
페이지 내 유일해야 하기 때문에 설정 전에 팀원과 조율이 필요합니다.
- 이디야, 블루보틀 각각 별도의 커스텀 프로퍼티 CSS파일을 @import를 이용해 운영해 합니다.
- 커스텀 프로퍼티 파일의 위치는 root/src/theme, 파일명은 variables문자열이 포함되도록 합니다.
- variables 커스텀 프로퍼티 내부의 선언은 --color-[색상이름] --font-size-[폰트크기] --space-[숫자]등을 활용하여 작성하도록 하며 이를 바탕으로 적극적인 var함수 활용으로 컴포넌트화를 가속합니다.
- @import는 최상단에 @media는 최하단에 배치하도록 합니다.