웹사이트] 성능 최적화
�♀️ 기획자는 지시만 하면 되는 사람인가?!?!
거의 대부분 기획자들은 다양한 기능을 테스트 하면서 또는 운영을 하면서 이슈를 확인하기 위해 운영하는 사이트를 둘러볼 때 어떻게 하면 좀 더 빠르게 할 수 있을까 하는 생각을 할 것이다.
(지금 나의 고민이라구!!)
경우에 따라서는 그게 내 탓이야? 인터넷 때문이잖아! 인터넷이 느린게야! 이런 거지같은 회사! 라며 많은 기획자들이 생각해 본적 있을 것 같다.(응~ 니 생각~)
사실 UX/UI 디자이너로 일하는 처음부터 종종 이런 경우가 발생했었고, 그때마다 그저 이미지 용량을 줄이고, 퍼블리셔와 개발자 들에게 소스 정리를 부탁하곤 했었다. 그리곤 '나의 업무 클리어~' 라며 '나는 더이상 할 것이 없다!'라고 외치곤 했다.
하지만 최근에 운영을 맡게된 사이트를 보며, 이것은 조금 다른 문제일 수도 있겠군!하는 생각을 하기 시작했다. 그리고 디테일을 한 번 파 볼까? 하는 생각을 하기 시작했다.
그래 나따위 파이썬도 조금 배우고 알도 배우고 퍼블도 할줄 안다구!!라며 시작을 해보았다.
사실 별거 없을 지도 모르지만~... 흐흐흐흐흐흐흐
1. When
[ 최적화를 고려해야 하는 시점]
① 운영
-. 운영을 하거나 기존에 있는 사이트를 기준으로 최적화를 고려해할 때 : 우선 브라우저의 관리자의 '네트워크/ 퍼포먼스/라이트하우스' 기능 확인하기
② 신규 프로젝트
: 이때부터 고려해야될게 있나 싶었져... 저도 그냥 대충 기능 많이 들어가면 느려져요. 이미지 많이 들어가면 늦어져요 하는 부분들 알져 알져~
당연히 많은 기획자들이 콘텐츠 기획할 때 어떤게 더 효율적일까에 대해서 고민한 다는 것도 안다. 하지만 조금 더 고려해야 할 부분은 어떤 리소스를 쓰고 얼마나 최소화 했을 때 최선의 결과물을 얻을 수 있는가에 대해서 항상 고민해야 한다는 것이다. 대충 어느정도의 이미지/영상 리소스 사용하는게 효율적인지와 다양한 퍼포먼스 마케팅과 어떻게 접목할 것인가에 대한 고민을 조금 해봐야 할 것 같다.
사실 최근에 이 업무를 하면서 콘텐츠를 기획할 때 너무 너무 중요한 부분이 될 수 있겠구나 무분별한 기능들이 생각 못한 오류들을 발생시키면서 고객들이 이런 상황을 느끼면 얼마나 불편할까에 대해서 다시한번 생각해 볼 수 있었다.
2. 브라우저 관리자
① 네트워크 : 통신과정의 문제점을 발견 할 수 있고, 성능 개선 지점을 분석 가능
② 퍼포먼스 : 퍼포먼스를 기록하고 상세히 분석. 시간 흐름별로 스냅샷으로 식별 가능
* 참고 : https://12bme.tistory.com/349
③ 라이트하우스 : 앞의 것들.. 사실 너무 어려워여.. 저도 대충 아는 정도.. 하지만 라이트 하우스는 좀 더 보기 쉽게 되어 있어서 이해하기 한결 쉬운거 같아요..ㅎㅎ 리포팅 형식이라고 말할 수 있을 것 같아요. SEO까지 체크되어 점수로 표기해 줘서 도움이 되는 것 같아요.(회사에 처음 들어와 뭘하고 있나 파악할때?ㅎㅎㅎㅎ)
* 참고 : https://velog.io/@dell_mond/Lighthouse-%EC%82%AC%EC%9A%A9%EB%B2%95
3. 디자이너 확인 사항
-. 이미지 용량의 적합성 확인 : PNG --> JPG, JPEG
-. 애니메이션 확장자 : GIF --> MP4
4. 퍼블리셔/개발자 확인 사항
-. DOM Tree
-. Font : 경우에 따른 확장자 사용
-. 이미지 지연 로딩
-. 불필요한 요소 제거
-. 캐시 활용
-. API 사용 여부 확인
5. 이런걸 왜 알아야돼!?
이것을 말하기 위해 위에 저런 내용을 써야 했던가!!
먼저 작업자와의 커뮤니케이션이다. 사람은 누구나 실수를 할 수 있다. 또는 깜빡하고 체크되지 못하는 부분도 있을 수 있다. 그렇기 때문에 기획자로서 해당 서비스의 주인의 입장에서 원하는 결과가 나오게 했는가에 대해 확인할 수 있어야 한다. 하기 싫어서 안한다고 의심하는 것이 아니라, 가끔가다 이런 부분을 체크해서 요청드리면 오히려 그들의 일을 덜어줄 수 있다.
두번 째는 원인과 결과에 대한 히스토리이다. 우리는 일을 하다 보면 모든 일에 근거를 제시해야되고 Befor와 After에 대해 보고해야될 일들이 너무나도 많다. 그런 부분에 대해서 디테일하게 체크하다 보면 조금 더 내 사이트에 어떤 문제가 발생하고 있는지에 대해 알 수 있고, 업무 성과 측면에서 정리해줄 수 있는 역할을 할 수도 있다.
( 이번 프로젝트를 진행하면서 우리 사이트는 기능 문제도 있었지만, API 문제가 크다는 것을 알게되는 기회였다!!!)
아직 나도 위에 참고 사이트가 기입한 내용에 대해서 정확히 알지는 못할 수 있다. 하지만 시작이 반이라고 하지 않았나, 조금씩 조금씩 알아가다보면 더 자세히 알 수 있는 날이 올 것이라 생각한다.
혹시나 글을 읽고 추가해야 될 부분이 있다면 말씀부탁드립니다~~�
