프론트엔드 스쿨 수강 후기

커넥to 후기 | ‘사용자 경험’을 높이는 ‘코드 작성법’을 알게 되었습니다.
① 이미지 최적화 Html/Css 편, 이*민 님

커넥to 수강생 TALK

part 1. 재미 있는 ‘인터랙티브(interactive) 웹페이지’를 만들고 싶어요.

Q. 안녕하세요. *민님. 자기소개 부탁드립니다.

경영학과를 전공했고, 컴퓨터공학과를 복수전공했습니다. 개발 프로젝트 경험은 2회, 블록체인 MVP 프로덕트 개발, 댄서 매칭 앱을 만들어봤습니다.

Q. 프론트엔드 개발자가 되고 싶었던 이유는 무엇인가요?

마우스를 클릭하거나 움직일 때마다 웹사이트 반응을 확인하는 게 재미있었어요. 그래서 저 역시 사용자를 즐겁게 하는 웹페이지를 만드는 일을 하고 싶었습니다.

Q. 프론트엔드 개발자가 된다면, 어떤 페이지를 만들어보고 싶으세요?

커넥to 과정에서 알게 된 ‘웹 접근성’의 중요함에 기반해서 웹 서비스 이용이 불편하거나 어려운 사용자들도 재미 있게 놀 수 있는 ‘인터랙티브(Interactive) 웹페이지’를 만들어보고 싶습니다.

Q. 인터랙티브(Interactive) 요소가 인상 깊었던 페이지가 있다면요?

위 페이지는 접속해서 창을 올리고 내릴 때마다 화면이 움직입니다. 웹사이트에 접속만 해도 직접 미술관에 가 있는 듯한 느낌을 받을 수 있어요. 사용자의 움직임에 맞춰 동적으로 움직이는 요소들이 인상 깊었습니다.

Q. 커넥to 과정에서도, 인터랙티브(Interactive) 웹페이지를 만들었다고 들었어요.

RZ 컬렉션 웹사이트를 참고해서 비슷한 느낌의 페이지를 개발해보고 싶었습니다. 마우스를 움직일 때마다 사용자에게 재미 있는 경험을 주고 싶어서 Html/Css 팀프로젝트로 인터랙티브(interactive) 웹페이지를 개발했습니다.

시간이 부족해서 완벽하게 완성하지는 못 했지만 한 번쯤은 만들어보고 싶었던 사이트였기 때문에 뿌듯한 경험이었습니다.

Q. 동적인 요소들이 인상깊네요. 네카라쿠배 개발자가 되어서 만들어보고 싶은 서비스는요?

이전보다 컴퓨터, 모바일 성능이 좋아진 만큼 메모리 문제로 기존에 시도할 수 없었던 동적인 사이트를 개발해보고 싶어요. 몇 천명에서 몇 만명의 많은 사용자를 대상으로 성능까지 고려한 만족스러운 사용자 경험을 제공하고 싶습니다. ​

part 2. Html/Css 수업, 사용자를 고려한 ‘코드 작성법’을 알게 되었어요.

Q. 기술블로그에 ‘이미지 최적화’ 관련 내용을 작성하셨어요. 이 내용을 쓰게 된 과정에 대해 설명해 주세요.

김데레사 강사님의 Html/Css 수업 당시, 팀 프로젝트를 통해 4명의 팀원들과 이미지 최적화, 웹팩 관련 과제를 수행했습니다.

과제를 통해 개발자로서 웹 페이지 이미지를 최적화 하는 방법에 대한 고민을 많이 하게 되었습니다. 그 과정에서 작성하게 된 내용입니다.

Q. 기술블로그에 작성하신 내용으로 넘어갈게요. 웹사이트 이미지 최적화를 꼭 해야하는 이유가 있다면 무엇일까요?

이미지 최적화가 되면 브라우저가 다운 받아야 할 바이트가 감소해서 클라이언트 쪽의 대역폭에 여유가 생깁니다. 콘텐츠가 빠르게 로딩 될 수 있고, 그렇게되면 사용자들에게 보기 편한 화면을 보여줄 수 있어요.

Q. 웹사이트에 이미지가 빠르게 로딩되어야 하는 이유는요?

사이트 방문자의 약 40%가 3초 안에 페이지가 로딩되지 않으면 이탈한다는 통계 결과가 있습니다. 프론트엔드 개발자라면, 사용자 체류시간을 올리고 사용자의 경험을 좋게 만들기 위해서 한 번쯤은 꼭 해봐야 하는 고민인 것 같아요.

Q. ‘이미지 최적화’ 과정에서 김데레사 강사님의 수업이 어떻게 도움이 되었나요?

김데레사 강사님의 수업을 통해 ‘이미지 폭 조정, 최적화된 이미지 포맷, 고정값을 통한 리플로우(Reflow) 방지 방법’ 등을 배울 수 있었습니다.

실제 Html/Css 미니 프로젝트를 통해 이 방법을 사용해서 웹페이지 이미지를 최적화 하는 데 많은 도움을 받았어요. 이미지 최적화가 완료되니 웹페이지 성능도 개선되었고 사용자 관점에서 훨씬 이용하기 편리한 사이트를 만들 수 있었던 것 같습니다.

part. 3 커넥to 입과 전과 달라진 점은…

#웹접근성 #코드 성능 #유지보수성 #코드효율

Q. 커넥to 입과 전과 비교했을 때 코딩 실력이 얼마나 좋아지셨나요?

커넥to 입과 후, 가장 크게 변화한 점은 Html/Css 각 요소마다 깊게 알게되었다는 점입니다. Html/Css 첫 과제가 페이지 경고창인 ‘모딜창’을 만들어 오라는 것이었어요. 처음에는 원래 해오던 방식대로 Html 태그 중, 디브(Div)라는 태그를 활용해서 코드만 완성할 생각이었어요.

그런데 수업을 통해 웹접근성 개념도 알게 되었고 Html에서 제공하는 시맨틱 태그(Semantic Tag) 등을 활용해서 접근성을 높일 수 있는 코드를 만들 수 있게 되었어요.

똑같은 UI를 구축하더라도 대학에서 배웠던 내용과 큰 차이가 있었어요. 수업을 듣지 않았더라면 평생 Html/ Css에 이런 개념이 있다는 것도 몰랐을 거라는 생각도 들었어요. 커넥to는 저에게, 코드를 바꿀 수 있는 계기가 되어 준 것 같아요.

Q. ‘웹접근성’ 말고도 중요하게 생각하게 된 요소는요?

웹페이지 ‘성능’인 것 같습니다. 팀프로젝트를 통해서 저희가 만든 웹 페이지를 구글의 ‘Web Vital’이라는 항목으로 평가를 받아봤어요. 그 부분에서 점수가 낮으면 화면이 느리게 작동하거나, 페이지 로딩 시간이 지체되는 문제랑 관련이 있는 겁니다.

웹 개발 경험은 있었지만, 웹페이지 ‘성능 평가’를 받아본 적은 처음이었습니다. 이번 기회를 통해 웹 페이지의 성능이 웹페이지 점수 및 사용자의 불편함에 영향을 주는 중요한 요소라는 것을 실감할 수 있었어요.

Q. 개발자로서 가치관은 어떻게 변화했나요?

대학생 신분으로 해커톤에 참여했을 당시에는 MVP(Minimum Viable Product, 최소가능 제품) 수준으로 구현하면 되니까 유지 보수성에 대해 깊게 고려하지 않았어요. 그 당시에는 동작하는 코드를 짜는 것에 급급했어요.

커넥to에서 수업을 듣고나서야, 실제 개발자의 관점에서 제대로 생각을 해보게 된 것 같아요. 회사의 서비스는 일회성으로 끝나는 것이 아니잖아요? 코드의 유지보수성, 코드 가독성의 중요성을 알게 되었습니다. 단순히 보여주기성 ‘하드코딩’이 아닌 먼 미래까지 생각한 코드 작성의 중요성을 알게 되었습니다.

Q.앞으로 남은 커넥to 과정에 임하는 자세를 들려주세요.

커넥to 과정에 입과 후, 대학생 신분으로는 생각조차 못했던 다양한 개념들에 대해 알아가고 있어요. ‘사용자 경험’을 높일 수 있는 코드 작성법도 알게 된 만큼, 주어진 과제에 대해 꾀 부리지 않고 성실하게 임할 계획입니다.

제로베이스와 함께한 이야기가 더 궁금하다면,