<aside class="sidebar__right"><nav class="toc"></nav><nav class="toc-custom">  </nav></aside>
<p>헬로우봇 팀에서 웹 프론트엔드 개발을 본격적으로 시작한지 어느덧 1년이 다 되어가네요. 이전 회사에서는 짧은 경력이지만 백엔드 개발을 했었기 때문에, 프론트를 처음 맡았을 땐 개발도 개발이지만 개발 외적으로도 자잘하게 신경쓸게 많다는 점이 힘들었던 것 같아요. 연동할 외부 sdk는 왜 이렇게 많고 내가 짠 css는 사파리에서 왜 자꾸 깨지는지&hellip;🥲 하지만 지금은 오히려 이것저것 알아가며 서비스를 개선하는 것에 보람을 느끼고 있답니다! 😊</p>
<p>프론트엔드, 말 그대로 서비스의 가장 앞단에서 사용자와 마주하는 부분이죠. 그렇기 때문에 어디로 튈지 모르는 사용자의 행보와 상황을 예측하고 대응해줘야 합니다. 그러면서 서버의 데이터를 잘 가공하고 표현해주는 핵심 역할도 잘 수행해야 하고, 사용자 분석을 위한 각종 이벤트 트래킹도 꼼꼼하게 개발해야 하죠. 이렇게 업무를 하면서 느낀 프론트엔드 개발자의 다양한 역할과 필요한 역량에 대해 정리해보려고 합니다.</p>
<h2 id="서비스에-대한-철저한-파악">서비스에 대한 철저한 파악<a class="header-link" title="Permalink" href="#서비스에-대한-철저한-파악"><span class="sr-only">Permalink</span></a></h2>
<p>코드와 기능에 대한 파악은 개발자에게 당연히 중요한 태스크일 거예요. 하지만 프론트엔드 개발은 더욱더 확실하게!! 서비스를 파악해야 한다고 생각합니다. 페이지들이 어떻게 연결되고 넘어가고 있는지, 어떤 데이터들이 사용되고 있는지, 디자인과 UI는 어떻게, 왜 그렇게 구성되어 있는지 등 서비스 자체에 대한 파악 뿐만 아니라 해당 서비스를 이용하는 사용자층과 디바이스, 가장 많이 사용되는 기능까지 전 분야에 걸친 파악이 필요합니다. 이런건 기획자랑 디자이너만 알면 되는거 아니야? 라고 생각할 수도 있지만, 기획을 실제로 구현하는 건 결국 개발자이기 때문에 문제를 어떻게 개발로 풀어갈 수 있을지 인사이트를 내기 위해선 개발자도 아는 것이 중요해요. 특히 이벤트 트래킹을 위한 코드를 작성할 때에는 사용자가 어떻게 진입하여 어떤 이벤트를 발생시키는지 꿰고 있어야 정확한 시점에 이벤트를 트래킹할 수 있더라구요..!</p>
<h2 id="헬로우봇-널리널리-알리기---seo와-공유-기능">헬로우봇 널리널리 알리기 - SEO와 공유 기능<a class="header-link" title="Permalink" href="#헬로우봇-널리널리-알리기---seo와-공유-기능"><span class="sr-only">Permalink</span></a></h2>
<p>열심히 서비스 개발해봤자 아무도 사용하지 않으면 의미가 없겠죠😭&nbsp;헬로우봇을 알리는 데에는 물론 마케팅의 역할이 굉장히 중요하겠지만, 프론트엔드 개발자의 역할도 그만큼 중요하단걸 깨달았습니다. SEO(Search Engine Optimization)와 링크 공유 시 og 태그 등을 적절히 사용하는 것은 서비스 알리기에 필수적인 요소입니다. 이를 위해서는 보통 CSR을 이용한 SPA로 된 모던 프론트엔드 서비스들에 SSR을 적용시켜야 하는데요, 현재 헬로우봇 스킬스토어는 요 SSR을 제대로 도입하지 못해서 SEO에 문제가 많은 상황입니다&hellip;흑흑ㄱ 물론 SEO를 위해 SSR만 필요한 건 아니고, 다양한 SEO 전략들을 살펴보고 저희 서비스에 맞는 것을 도입하기 위한 시행착오를 거쳐야할 것 같습니다. 내년에는 구글링 잘 되는 헬로우봇이 되도록 정진해야겠어요!!</p>
<h2 id="각종-디바이스와-브라우저-대응">각종 디바이스와 브라우저 대응<a class="header-link" title="Permalink" href="#각종-디바이스와-브라우저-대응"><span class="sr-only">Permalink</span></a></h2>
<p>프론트엔드는 유저가 사용하는 디바이스와 브라우저에 상당히 종속적이기 때문에 다양한 케이스에 대한 대응이 필요합니다. 디바이스 크기에 따라서 화면 요소들이 유동적으로 변하는 반응형 웹을 구현하려면 마크업과 스타일에 대한 공부도 게을리 할 수 없죠! 또한 브라우저도 계속해서 업데이트되고 있고, 신생 브라우저들도 계속 탄생하기 때문에 chrome, safari, 삼성 인터넷, opera <del>(IE는 그냥 버리자구요)</del> 등 다양한 녀석들의 기능 지원 범위를 파악하고 최대한 범용적인 웹을 만들려는 노력이 필요합니다.</p>
<p>물론 JavaScript 로직 개발은 두말할 것도 없는 핵심 업무죠. 하지만 언제나 기억해야 할 것은 개발(코딩)은 문제를 해결하기 위한 도구일 뿐이라는 것! 기획이나 디자인을 약간 수정해서 개발 공수를 크게 줄일 수 있다면 그걸 제안할 수 있는 개발자가 되는 겁니닷. 한 33%는 사용자, 33%는 기획자에 빙의해서 개발을 하면 좋은 것 같아요ㅎ</p>

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

주소

더 나은 상품 소개서를 준비하고 있습니다. 상품 관련 문의는 아래 문의하기 버튼을 이용해 주시기 바랍니다.