<aside class="sidebar__right">
            <nav class="toc">
              
            </nav>
            
            <nav class="toc-custom">
              
                



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

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

<h2 id="서비스에-대한-철저한-파악">서비스에 대한 철저한 파악<a class="header-link" href="#서비스에-대한-철저한-파악" title="Permalink"><span class="sr-only">Permalink</span><svg class="svg-inline--fa fa-link fa-w-16" aria-hidden="true" focusable="false" data-prefix="fa" data-icon="link" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg></a></h2>

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

<h2 id="헬로우봇-널리널리-알리기---seo와-공유-기능">헬로우봇 널리널리 알리기 - SEO와 공유 기능<a class="header-link" href="#헬로우봇-널리널리-알리기---seo와-공유-기능" title="Permalink"><span class="sr-only">Permalink</span><svg class="svg-inline--fa fa-link fa-w-16" aria-hidden="true" focusable="false" data-prefix="fa" data-icon="link" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg></a></h2>

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

<h2 id="각종-디바이스와-브라우저-대응">각종 디바이스와 브라우저 대응<a class="header-link" href="#각종-디바이스와-브라우저-대응" title="Permalink"><span class="sr-only">Permalink</span><svg class="svg-inline--fa fa-link fa-w-16" aria-hidden="true" focusable="false" data-prefix="fa" data-icon="link" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg></a></h2>

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

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

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

주소

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