배달의 민족 미니 프로젝트 회고

지난 금요일 커넥to에서 미니 프로젝트를 시작하였다.

HTML/CSS 수업을 한달동안 배운 것을 응용하여 클론코딩을 하거나 자유주제로 웹 페이지를 만들고 발표하는 과제였다.

주제 선정

팀원들과 아이스브레이킹을 하면서 프로젝트 주제에 대해서 이야기 하였다.

각자 좋아하는 분야에 대해 자유주제를 정하기도 하였지만

우리가 그동안 배운것을 가장 잘 응용해볼 수 있는 주제를 정하기로 하였다.

그러던 중 앱 서비스만 있는 배달의 민족을 웹으로 구현해보면 어떨까라는 생각을 하였다.

배달의 민족을 선택한 이유

간편주문이라는 슬로건에 맞지 않게 점점 복잡해지는 UI
코로나 완화로 배달앱 사용자 유저 급감
태블릿 버전 미지원으로인한 UX 저하 …

위와 같은 문제를 개선하기 위해 배달의 민족 웹 서비스를 개발해보기로 결정하였다.

발표 방향 선정

quick mode

웹 접근성을 고려하여 간편모드를 제공한다.

기존 배민에서 제공하는 앱 서비스를 이용하기 불편한 장애인, 저시력자 등을 고려했다.

이와 더불어 태블릿에서도 지원가능한 반응형 웹 사이트를 개발한다.

협업방식

1. CSS 프레임 워크 선정

기획단계에서 우리가 만들 페이지가 8페이지로 정해졌다. (일반모드 4페이지 + 간편모드 4페이지)

많은 페이지를 관리하기 위해 sass 프레임워크를 사용했다.

Sass를 선택한 이유

@mixin

@mixin을 사용하여 여러 페이지에서 자주 사용되는 스타일을 @iclude 하여 사용하기 편하게 했다.

BEM 표기법

BEM 표기법을 사용하여 naming convention을 정하면 이후 nesting 문법을 사용하여 관련 클래스를 한눈에 보기 편하다.

스타일 컴포넌트화

src
├── css
│   ├── index.css
│   └── index.css.map
├── fast_pages
│   ├── main.html
│   ├── menu.html
│   ├── store.html
│   └── storeList.html
├── js
│   ├── jquery-1.12.3.js
│   └── scripts.js
├── nomal_pages
│   ├── main.html
│   ├── menu.html
│   ├── store.html
│   └── storeList.html
└── scss
    ├── absrtacts
    │   ├── _index.scss
    │   ├── _media-query.scss
    │   ├── _mixin.scss
    │   └── _unit.scss
    ├── base
    │   ├── _default.scss
    │   ├── _index.scss
    │   ├── _nomalize.scss
    │   └── _reset.scss
    ├── components
    │   ├── _index.scss
    │   └── _navigation.scss
    ├── index.scss
    ├── layout
    │   ├── _footer.scss
    │   ├── _header.scss
    │   └── _index.scss
    ├── pages
    │   ├── _fast-main.scss
    │   ├── _fast-menu.scss
    │   ├── _fast-store.scss
    │   ├── _fast-storeList.scss
    │   ├── _home.scss
    │   ├── _index.scss
    │   ├── _nomal-main.scss
    │   ├── _nomal-menu.scss
    │   ├── _nomal-store.scss
    │   └── _normal-storeList.scss
    └── themes
        ├── _a11y.scss
        ├── _color.scss
        ├── _font.scss
        ├── _index.scss
        └── _spacing.scss

각 페이지에 적용되는 스타일들만 따로 빼내어 사용할 수 있어 이후에 유지관리가 용이하다.

2.HTML 구조 설계

웹 접근성을 고려하여 div태그를 최소화하고 시멘틱 태그를 사용하여 논리적인 구조로 마크업을 설계해야한다.

<!-- 헤더 -->
<header class="header">...</header>
<!-- 메인 -->
<main id="skip" class="main">...</main>
<!-- 푸터 -->
<footer class="footer">...</footer>

3. figma 디자인 시안 제작

figma

우리가 만들 페이지를 figma를 사용하여 디자인 시안을 제작한다.

margin, padding, font, color 등 통일해야할 부분을 미리 정해놓고 작업한다.

4. gitflow 전략

저번 8월 3일 TIL 작성에서 배웠던 gitflow 전략을 사용하여 버전관리와 협업을 진행하였다.

과정 중 문제점

1. 크로스 브라우징

safari, FF, Chrome 대표 브라우저에서 동일하게 동작하는지 확인하여야 한다.

safari, FF에서 탭키 issue

FF에서 탭키 포커스가 button 태그에 있을 경우 영역이 점선으로 표현되는 현상

firefox

위 설정을 체크해줘야한다.

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted;
}

위 현상은 normalize.css에서 스타일을 지정해주었기 때문에 발생하였다.

safari에서 탭키가 input 요소이외에는 포커싱안되는 현상

safari

위 설정을 체크해줘야 한다.

2. Lighthouse 성능

lighthouse 성능 테스트를 사용하여 성능을 측정해본 결과

lighthouse

성능이 매우 낮게 나왔는데, 그 이유는 적절한 이미지 포맷을 사용하지 않았기 때문이다.

이미지 포맷을 webp 형식으로 변환한 후 사용할 경우 성능이 개선되었다.

webp

소감

프로젝트 발표 기획부터 디자인, 마크업 설계, sass 스타일링, git 협업 등으로 1주일이 순식간에 지나간 것 같다.

그만큼 힘들었지만 팀원들과 웃으면서 같이 원하는 목표를 이루기 위해 으쌰으쌰하니깐 동기부여도 되고 좋은 추억도 많이 쌓을 수 있었다.

열심히 노력은 했지만 그래도 아쉬운 점이 많이 남는다.

이미지 포맷 issue에 대한 작업을 더 참여해보지 않은 것에 대한 아쉬움
화면에 필요한 디자인 요소들을 미리미리 준비하지 못했던 아쉬움
git을 배운대로 제대로 사용해보지 못한 아쉬움

그리고 다른 팀의 발표를 보면서 느낀점은 확실히 한달전에 처음 발표 때와 비교해서 다들 많이 성장했다는 것을 느꼈다.

나도 그 때보다는 더 나아진 모습이라고 생각하지만, 발표를 잘하는 분들을 유심히 관찰하면서 그분들 처럼 능숙하게 발표를 할 수 있도록 더 노력해봐야겠다고 다짐하는 시간을 갖게 되었다.

또한, 데레사강사님의 마지막 말씀이 기억에 남는다.

남은 5개월 과정이 짧지 않은 기간일 것이니, 과정을 중요시하며 느슨해지지 말고 동기들과 소통을 자주하여 커뮤니케이션 스킬을 향상 시키도록 하자.

배달의 민족 미니프로젝트 회고