화이팅

멋쟁이 사자처럼 부트캠프 14기 9조 119

🚑 UI 프로젝트 🚒

팀원 소개

프로젝트 개요

  • - 도출된 UI 요소들을 아토믹 디자인(Atomic Design) 방법론에 따라 기능별 또는 크기별로 분류.
  • - 각 컴포넌트의 재사용성과 확장성을 고려하여 설계.
  • - 구현된 컴포넌트들을 조합하여 참고 서비스의 주요 페이지 중 일부를 실제로 구성.
  • - 커스텀 프로퍼티의 적극적인 활용으로 컴포넌트화 가속.
  • - 웹 접근성 및 웹 표준 준수.(키보드 사용자 및 SR리더기 사용자의 사용성 구축)
  • - lighthouse를 이용한 퍼포먼스 점수 관리.(최소 90점 이상이 목표)
  • - 문법오류는 일절 없도록 할 것.(w3.org 및 크롬확장프로그램 활용)
  • - 미디어 쿼리를 활용한 반응형 웹, 마우스오버/클릭이벤트/슬라이드/애니메이션 기능 구현.
  • - 기본규칙 : Type/작업-페이지_혹은_기능/Initials
  • 문자 작성시 케밥 케이스(kebab-case) 사용
  • 띄어쓰기 작성시 언더바(_) 활용
  • - Type: 작업의 종류를 나타내는 접두사 (아래 예시 참고)(첫 문자는 대문자로 함)
  • Feature
  • Refactoring
  • Bug
  • - 기본 원칙
  • 시맨틱 마크업: 요소는 의미에 맞게 사용 (예: 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는 최하단에 배치하도록 합니다.

회고

이번 UI 프로젝트를 진행하면서 단순히 마크업과 스타일링만 하는 게 아니라, 시맨틱한 구조, 접근성, 반응형 설계까지 고려한 UI 구성이 얼마나 중요한지 많이 느꼈습니다.
특히 컴포넌트를 나누고 재사용하는 과정에서, 처음엔 어떤 단위로 분리해야 할지 많이 고민했지만, 작업을 거듭할수록 컴포넌트의 재사용성과 유지보수 편리함을 체감할 수 있었습니다.
또 실제 브랜드 사이트를 참고하면서 디자인을 구현해보니, 디테일 하나하나가 사용자 경험에 어떤 영향을 미치는지 몸으로 익히게 되었고, 디자인과 개발의 균형을 맞추는 연습이 되었습니다.
이번 프로젝트를 통해 단순 구현을 넘어서 실제 서비스처럼 작동하는 UI를 만드는 경험을 할 수 있었고, 앞으로 어떤 프로젝트를 하더라도 이 경험이 큰 기반이 될 것 같다고 느꼈습니다.

이번 프로젝트를 진행하면서, 강사님께서 왜 초반에 대화를 많이 나누고 규칙을 정하라고 하셨는지 몸소 느낄 수 있었습니다.
확실히 초반 세팅을 잘해 놓아야 뒤에서 고생을 덜 하게 되는 것 같아요.
이번 프로젝트를 통해 Git에 조금 더 친숙해졌고(git stash 짱), 팀 프로젝트가 어떻게 진행되는지도 직접 경험할 수 있어 좋았습니다.
초반에 방향을 잘못 잡아 다소 힘들었지만, 다 같이 힘내서 끝까지 완성할 수 있었던 것 같습니다. 9조 119, 고생 많으셨습니다. ㅠㅠ 새벽에 놀라 달려와 주신 슬비쌤, 진심으로 감사드립니다!

이번 UI 프로젝트를 통해 단순히 보이는 화면을 만드는 것을 넘어, 재사용 가능하고 관리하기 쉬운 컴포넌트를 설계하고 구현하는 것의 중요성을 깊이 생각해 볼 수 있는 기회였습니다.
특히 HTML의 시맨틱 구조와 CSS의 다양한 레이아웃 및 인터랙션 기법들을 활용하여 사용자 경험을 고려한 UI를 만드는 과정을 통해 많이 배울 수 있었습니다.
마지막으로 GIT을 이용한 팀 프로젝트를 진행함으로 인해 개발자라는 직군이 얼마나 많은 소통과 팀워크를 요구하는지 알 수 있었던 기회였습니다.
프론트엔드 직군으로 취업을 희망하는 모두에게 추천하고 싶은 프로젝트였습니다. 감사합니다!

이번 프로젝트로 환경 구성부터 git을 통한 협업 과정까지 한번에 경험할 수 있는 아주 감사한 기회였습니다.
처음에는 낯선 흐름과 어색한 방법에 적응하는데 어려움이 있었지만 팀원들과 함께 전반적인 개발 플로우를 이해하고 따라가는 귀중한 시간이었습니다.
개인적으로는 아직 역량이 부족해서 많은 기능을 주도적으로 구현하진 못하였지만,팀원분들의 배려와 도움 덕분에 다양한 작업을 할 수 있었고 함께 고민하고 소통하는 과정을 통해 문제를 해결해 가는 사고 방법과 소통방법에 대해 많은것을 배웠습니다.
또한 이번 프로젝트를 통해서 컴포넌트 단위로 기능을 나누고 재사용한 구조로 설계하는 법, 구현시 접근성과 올바른 문법 사용의 중요성을 체감하게 되었습니다. 단순히 동작하는 코드가 아닌 유지 보수가 가능하고 명확한 코드에 대해 느끼게 된것에서 큰 기쁨을 느낍니다.
다른 무엇보다도 좋은 팀원분들을 만나 기술적 배움뿐 아니라 협업과 커뮤니케이션을 통해 힘을 얻어 성장하고자 하는 동기를 얻게 된것에 감사 드립니다 모두 수고하셨습니다!