[Day 45] 2022-0825 : UI / UX 분석

🐈오늘 공부한 것

✔️UI / UX 분석하기

https://recruit.navercorp.com/main.do

NAVER Careers

피그마로 클론한 사이트는 네이버 Careers 페이지이다. 심플해서 피그마 사용 방법을 익히기 좋을 것 같아서 골랐는데, 약간 아쉬운 점은 굉장히 미니멀해서 다양한 컴포넌트를 적용하는 예제는 아니라는 것. 아래는 피그마 프로토타입. 

Figma

1. 먼저 사용한 디자인패턴은 크게 드롭다운 메뉴와 GNB(네비게이션)바 그리고 캐러셀 - 이미지 슬라이드가 있다. 이미지 슬라이드는 일반 캐러셀처럼 자동으로 이미지를 넘기는 것은 아니고, 드래그해서 이미지를 왼쪽에서 오른쪽으로 옮긴다.

2. 컬럼 그리드 시스템 적용 : 본 페이지에서도 그리드에 맞춰 이미지와 텍스트가 배치된 것을 볼 수 있다. 클론에서도 완벽하진 않지만 12개 컬럼으로 구분해 이미지와 텍스트 간격을 맞춰 보기 편하게 했다. 원본 페이지는 뷰포트 크기에 따라 반응형으로 사이즈가 변한다.

3. 10가지 사용성 평가 기준에 부합하는 요소를 추려봤는데...

- 이미지의 이동 방향이 왼쪽에서 오른쪽이라 편안하고, 폰트와 이미지 마진, 메뉴바 디자인 등 일관성있는 디자인 요소를 확인할 수 있었다. 그리고 이미지당 최소한의 디스크립션만 제공해서 미학적이고 미니멀한 UI 디자인을 가지고 있다.

✔️리액트 가상 돔

오늘 TIL 스터디 웹 브라우저 동작 원리에 대한 발표를 준비하면서, 리액트 가상 돔에 대해서 쬐금 더 자세히 살펴볼 수 있었다. 처음 리액트를 볼 때 가상 돔에 대해서 명확하게 이해하기가 어려웠는데 브라우저 렌더링 과정과 최적화 관점에서 보니 좀 더 잘 이해할 수 있었다.

먼저 가상 돔이란 말그대로 가상의 돔에 모든 변경사항을 실행시키고 그 가상 돔으로 실제 DOM을 업데이트 하는 기능을 한다. 실제 DOM 조작은 변경 횟수보다 적게 일어나기 때문에 이에 필요한 연산 횟수를 줄여 성능을 최적화시킬 수 있다. 이런 가상 돔이 없을 때 브라우저에서는 이벤트등에 의해 요소가 변경되었을 때마다 계산을 다시하고 다시 그리는 리플로우, 리페인트가 발생하는데 복잡한 페이지의 경우 이런 연산이 과도하게 이뤄지면 성능에는 좋지 않을 것이다.  

🐈더 공부할 것

1. 리액트 훅 

2. styled-component

🐈오늘의 느낀 점

1. 공부를 과도하게 하지 않는데도 컨디션이 점점 안좋아지고 있다,, 오늘은 두통에 시달렸는데 내 생각엔 앉아서 목과 승모근에 힘을 많이 줘서 그런 것 같다 ㅜ.ㅜ 내일만 하면 주말이니까 조금만 더 힘내봐야지...

 

2. 오늘 선참시가 있었는데, 선배분이 해주신 말씀 중 대부분의 내용을 실천하고 있어서 잘 하고 있구나...란 생각이 들었다. 다만 코드스테이츠에 들어오면서 영어 공부에 손을 놓게 되었는데, 개발 관련해서 영어자료를 많이 찾아보면서 익숙해져야겠다. 공식문서는 정말 읽기 힘들지만 쉬운 아티클정도는 읽어볼 수 있으니까..!