🤹 프론트엔드 개발자, 어디까지 알아야 해?

헬로우봇 팀에서 웹 프론트엔드 개발을 본격적으로 시작한지 어느덧 1년이 다 되어가네요. 이전 회사에서는 짧은 경력이지만 백엔드 개발을 했었기 때문에, 프론트를 처음 맡았을 땐 개발도 개발이지만 개발 외적으로도 자잘하게 신경쓸게 많다는 점이 힘들었던 것 같아요. 연동할 외부 sdk는 왜 이렇게 많고 내가 짠 css는 사파리에서 왜 자꾸 깨지는지…🥲 하지만 지금은 오히려 이것저것 알아가며 서비스를 개선하는 것에 보람을 느끼고 있답니다! 😊

프론트엔드, 말 그대로 서비스의 가장 앞단에서 사용자와 마주하는 부분이죠. 그렇기 때문에 어디로 튈지 모르는 사용자의 행보와 상황을 예측하고 대응해줘야 합니다. 그러면서 서버의 데이터를 잘 가공하고 표현해주는 핵심 역할도 잘 수행해야 하고, 사용자 분석을 위한 각종 이벤트 트래킹도 꼼꼼하게 개발해야 하죠. 이렇게 업무를 하면서 느낀 프론트엔드 개발자의 다양한 역할과 필요한 역량에 대해 정리해보려고 합니다.

서비스에 대한 철저한 파악

코드와 기능에 대한 파악은 개발자에게 당연히 중요한 태스크일 거예요. 하지만 프론트엔드 개발은 더욱더 확실하게!! 서비스를 파악해야 한다고 생각합니다. 페이지들이 어떻게 연결되고 넘어가고 있는지, 어떤 데이터들이 사용되고 있는지, 디자인과 UI는 어떻게, 왜 그렇게 구성되어 있는지 등 서비스 자체에 대한 파악 뿐만 아니라 해당 서비스를 이용하는 사용자층과 디바이스, 가장 많이 사용되는 기능까지 전 분야에 걸친 파악이 필요합니다. 이런건 기획자랑 디자이너만 알면 되는거 아니야? 라고 생각할 수도 있지만, 기획을 실제로 구현하는 건 결국 개발자이기 때문에 문제를 어떻게 개발로 풀어갈 수 있을지 인사이트를 내기 위해선 개발자도 아는 것이 중요해요. 특히 이벤트 트래킹을 위한 코드를 작성할 때에는 사용자가 어떻게 진입하여 어떤 이벤트를 발생시키는지 꿰고 있어야 정확한 시점에 이벤트를 트래킹할 수 있더라구요..!

헬로우봇 널리널리 알리기 - SEO와 공유 기능

열심히 서비스 개발해봤자 아무도 사용하지 않으면 의미가 없겠죠😭 헬로우봇을 알리는 데에는 물론 마케팅의 역할이 굉장히 중요하겠지만, 프론트엔드 개발자의 역할도 그만큼 중요하단걸 깨달았습니다. SEO(Search Engine Optimization)와 링크 공유 시 og 태그 등을 적절히 사용하는 것은 서비스 알리기에 필수적인 요소입니다. 이를 위해서는 보통 CSR을 이용한 SPA로 된 모던 프론트엔드 서비스들에 SSR을 적용시켜야 하는데요, 현재 헬로우봇 스킬스토어는 요 SSR을 제대로 도입하지 못해서 SEO에 문제가 많은 상황입니다…흑흑ㄱ 물론 SEO를 위해 SSR만 필요한 건 아니고, 다양한 SEO 전략들을 살펴보고 저희 서비스에 맞는 것을 도입하기 위한 시행착오를 거쳐야할 것 같습니다. 내년에는 구글링 잘 되는 헬로우봇이 되도록 정진해야겠어요!!

각종 디바이스와 브라우저 대응

프론트엔드는 유저가 사용하는 디바이스와 브라우저에 상당히 종속적이기 때문에 다양한 케이스에 대한 대응이 필요합니다. 디바이스 크기에 따라서 화면 요소들이 유동적으로 변하는 반응형 웹을 구현하려면 마크업과 스타일에 대한 공부도 게을리 할 수 없죠! 또한 브라우저도 계속해서 업데이트되고 있고, 신생 브라우저들도 계속 탄생하기 때문에 chrome, safari, 삼성 인터넷, opera (IE는 그냥 버리자구요) 등 다양한 녀석들의 기능 지원 범위를 파악하고 최대한 범용적인 웹을 만들려는 노력이 필요합니다.

물론 JavaScript 로직 개발은 두말할 것도 없는 핵심 업무죠. 하지만 언제나 기억해야 할 것은 개발(코딩)은 문제를 해결하기 위한 도구일 뿐이라는 것! 기획이나 디자인을 약간 수정해서 개발 공수를 크게 줄일 수 있다면 그걸 제안할 수 있는 개발자가 되는 겁니닷. 한 33%는 사용자, 33%는 기획자에 빙의해서 개발을 하면 좋은 것 같아요ㅎ