PROJECT : 내게 드로우
DISTRIBUTUON : 2021.11.19
LANGUAGE : HTML, CSS, SCSS, BABEL, JAVASCRIPT
Hompage | 내게 드로우
Git | 내게 드로우 Git 레파지토리
🤷🏼 프로젝트 소개
자바스크립트는 최소로 사용하고 HTML과 CSS를 최선으로 사용하여 접근성과 성능이 높은 페이지를 만드는 것을 최우선으로 생각했다.
드로우란?
[ Draw ] : 추첨, 제비뽑기
한정판 신발 혹은 새로 나온 신발에 응모하여 당첨자에 한해서만 구매를 할 수 있는 것을 드로우라고 한다. (한정판 신발의 경우 원가로 구매한 것보다 더 비싸게 팔 수 있기 때문에 ― Resell: 리셀 ― 인기가 많다. )
내게 드로우의 시작
( 참조 - 럭키드로우 )
근데 이 드로우라는 추첨을 하는 곳이 한 두군데도 아닐 뿐더러 추첨이 언제 올라올지 모르기 때문에 정보를 모아보는 곳이 필요했다.
기존에 있는 럭키드로우, 크림 사이트가 있지만 낮은 성능, 시맨틱하지 않은 마크업 등의 문제가 있다고 생각했고, 위의 이미지를 보면 럭키 드로우 사이트 내에 이미지만 보고 어떤 것이 우먼스 인지, 맨즈 인지 식별이 불가능하다는 불편함을 인지하였다. 그래서
웹 접근성 + 트랜디한 UI + 성능 개선 의 드로우 페이지를 만들어보고자 했다.
🔧 크로스브라우징 이슈
주요 타겟층 : 신발에 관심이 많은 10대 - 30대
=> 크롬, 파이어폭스, safari 중심으로 개발
- 그럼 다른 브라우저는 ?
프론트엔드 개발자들의 최고의 적 'IE' 이슈
너무 익히 들어서 IE를 100% 안고가기보다는 선택적으로 안고가기로 했다.
디자인의 요소를 정확하게 보여주기보단 기능만이라도 100퍼센트 동작할 수 있게끔 !
Grid-row
배치를 위해 사용했던 grid-row 속성이 IE에서 호환되지 않는다는 것을 .. 알아버렸다. 그래서 각각의 영역에 하나의 아이템을 직접 지정해주는 방식으로 해결했다.
각각의 영역을 직접 지정해줘서 당연히 비효율적인 방식이었다.
( 교훈 : 호환성을 미리 고려해서 배치하자 !)
자바스크립트 ES6
IE에서 자바스크립트 ES6버전이 적용되지 않는다는 것을 인지하고 바벨을 이용하여 호환이 가능하게끔 했다.
🔧 성능개선 이슈
마크업, js 모두 끝내고 기대감에 부풀어 light house를 돌려보았다.
.. 성능 개선을 해야겠다..!
Performance 개선 1 - image 크기 조절
아무래도 이미지 사용이 많은 홈페이지다보니 jpg 만을 다운받을 수 있는 IE에서 가장 많이 떨어지기도 했고, 큰 jpg 의 이미지를 webp 로 변환시키니까 webp 파일 조차도 용량이 컸다. 그래서 jpg 파일의 크기를 아예 줄여서 적용시켜주었다. (2.1MB -> 310KB 로 자체적 변환)
Performance 개선 2 - webp , webm 적용
이미지는 webp 로, 동영상은 webm 으로 변환해서 지원하는 브라우저 내에서 성능을 최적화하기로 했다. 결과론적으로 (673KB 였던 jpg 를 webp로 386KB까지 줄일 수 있었다.)
performance 개선3 - lazy loading 이용
스크롤을 내릴 때 이미지를 요청하는 lazy loading 방식을 이용하여 performance를 개선하였다. lazy loading을 적용할 수 있는 선택지는 우리에게 js와 css 가 있었는데 css 로 lazy loading을 적용했다.
performance 개선 4 - reflow, repaint
사용자의 시각적인 효과를 만족시키기 위해서 애니메이션을 많이 사용했는데 애니메이션은 reflow와 repaint 되는 경우가 많아서 웹페이지의 동작을 느리게 만들 수 있다.
해결안
- margin < tranform : translate 사용
- display:none < opacity 사용
Accessibility 개선 - img 태그 alt 속성 추가
알면서도 까먹는 영역이었어서 생략할 것이다.
잊지말자 !
<img src=" 이미지 주소" alt="이미지 설명"> SEO 개선 - meta 태그 추가
<meta name="description" content="홈페이지에 대한 설명">meta 태그를 통해 어떤 홈페이지인지 설명하는 것을 추가하여 SEO를 높혔다.
✌️ 프로젝트를 끝마치며
기획
백퍼센트 클론 홈페이지를 만드는 것이 아니었기 때문에 우리가 처음부터 기획해야 했다. 처음에는 페이지 3장 (index, draw중인 신발 리스트, 나에게 맞는 신발은?- 신발 mbti 테스트, 신발 상세페이지 - 시간이 허락해준다면.. )을 구상했다. 정확한 기획없이 코드부터 짜기 시작하니까 삐그덕거렸다.
마크업을 끝내고서도 어떤 페이지가 우선될 것인지 고민이 되었다.(시간은 부족하고.. 마크업은 해야겠고.. ) 그러다 결국 나에게 맞는 신발은?- 신발 mbti 테스트 페이지를 만들기 포기하고 상세페이지에 집중하는 쪽으로 설정했다.
figma의 부재
다들 멀리 살기 때문에 랜선 회의를 할 때 부끄럽지만.. 레이아웃을 그림판으로 그려야 했다. 그렇기 때문에 팀원들 각자 생각하고 있던 방향이 달랐던 부분이 있어서 기획에 대한 회의를 계속해야 했다. 가장 힘들었던 점은 모바일 일 때와 데스크톱일 때 폰트 사이즈가 몇 pt 인지 혹은 몇 % 인지 정확한 수치를 몰랐던 경험이었다. 눈대중에 의존해야 했는데 그게 정말. 귀찮고 어려운 작업이었다. FIGMA를.. 조금이라도 쓸 수 있었다면 이렇게 어렵게 돌아오진 않았을 텐데라는 생각이 가장 컸다.
Git flow 와 Issue 관리
▲ git 이슈관리
아마 최고의 경험이었다 다짐할 수 있었다. merge를 잘못시켜서 식은땀을 흘리기도 했고, branch를 잘못 설정해서 아찔했던 경험도 있다. 지금 다 경험해보았으니 되었다.
👍🏻 계속 추가해야하는 부분
모바일 safari 크로스브라우징
safari에서 모바일 테스트까지 거쳤는데 배포하고 보니까 아이폰과 아이패드에서 돋보기 아이콘이 깨지는 현상이 발생했다.
저희 발표 1시간 남았는데 이런 문제가 발생해도 되는건가요 ... ?
크로스브라우징 이슈는 IE가 가장 힘들다고 생각했는데 예상치 못한 복병이었다. 아마 input 태그의 border에 문제가 있는 것 같은데(추측) 이유를 찾아서 수정해야 한다.
동영상 로딩 시간
index 홈페이지를 접속할 때 동영상이 바로 나오지 않고 0.2초 정도 기다려야 한다. 이런 점을 개선해보고자 webm 의 크기도 줄여보고 mp4 도 줄여봤는데 지금이 최선이었다. 이 이슈를 해결하면 꼭..! 이 글에 추가해보겠습니다.
+ 프로젝트 피드백
발표 PPT 에 대한 부분이 개발자적인 면이 돋보였다고 칭찬을 받았다. 아무래도.. 진짜 경험에서 나온 아래와 같은 '최종적-정말최종-찐최종.jpg'라는 문구가 강사님의 마음에 드신 것 같다.
그리고 코드를 어떻게 발표에서 지루하지 않게 보여줄 수 있을까 고민하다가 terminal 창을 생각했는데.. 이게 ! 꽤나 괜찮았던 것 같다고 스스로 생각한다 😭
주제 선정도, 이렇게 하는게 어떨까 저렇게 하는게 어떨까라고 주도적으로 움직였는데 발표에서 우리 이만큼 했어요!!라고 잘 보여주지 못해서.. 프로젝트에 관한 칭찬을 거의 받지 못했는데 내가 잘못된 방향으로 이끌어 결과가 이정도 밖에 나오지 못했던 것 같아 너무 아쉽다. 운이 좋아서 모두 정말 똑똑하고, 센스있는 팀원들을 만날 수 있었는데 음 . 아무래도 드로우라는 컨셉을 내가 잘 설명하지 못해서 함께 이뤄낸 결과물을 사람들에게 이해시키기지 못했던 것 같아 아쉽다.
,
가장 인정할 수 밖에 없었던 홈페이지에 대한 피드백은.
기존에 있던 것과 어떤 것이 다른가. 였다. 우리는 개발자니까 이게 기존 사이트보다 더 나을거야! 라는 점이 없다는 것..? 너무 맞는 얘기여서 마음에 박혔다 ! !
,
다음엔 꼭 .. 발표 잘할게요 ㅠㅠ
