잘하는 프론트엔드 개발자란?

잘하는 프론트엔드 개발자란 무엇일까요? 최근 프론트엔드 개발을 진행하면서 들었던 생각을 간략하게 정리해보았습니다. 아래 조건들이 잘하는 프론트엔드 개발자가 되기 위해 집중해야 할 전부라고는 할 수 없겠지만, 실력 있는 프론트엔드 개발자라면 아래 역량을 모두 갖추고 있을 것이라고 생각합니다.

1. 미려한 사용자 경험을 전달하는 역량
2. 빠른 속도로 구현하는 역량
3. 협업할 수 있는 역량

1. 미려한 사용자 경험을 전달하기

'미려하다'는 ''아름답고 보기에 매우 좋다'는 뜻의 우리 말입니다. 조금은 모호한 편이라고 할 수 있지만, 세분화해보면 아래와 같을 것입니다.

1. 사용자가 느끼기에 화면이 아름답고 조작이 편할 것 (UI/UX)
2. 성능 상 이슈가 없도록 구현할 것
3. 웹 접근성을 고려하여 구현할 것

첫 번째로, 일단 사용자가 느끼기에 화면이 아름다워야 합니다. 아이러니하게도, 얼마나 우아한/이상한 방식으로 코드를 짰는지와는 상관 없이 프론트엔드 개발자는 실제 사용자가 화면에서 느끼는 만족도로 역량을 평가받는 것 같습니다. 이를 위해서는 우선 기획된 화면 자체가 아름다워야 할 것이고, 디자인 그대로 구현 수 있는 역량이 되어야겠지요.

기본적으로 제품에 대해 본인이 애정이 넘쳐야 합니다. 어떻게하면 더 나은 사용자 경험을 제공할 지를 끊임없이 고민해야 합니다. 여담이지만 현재 개발하고 있는 팀에서는 디자이너가 없기 때문에... 디자이너 몫까지 같이 하고 있는데, 정보를 어떤 방식으로 전달할 것인지도 굉장히 많은 고민이 필요한 영역인 것 같습니다. 처음 팀에서 개발할 때 글자를 몇 포인트로 보여줘야 가장 적절한지에 대한 고민을 시작으로 디자인 시스템에 대해 찾아보고 고민한 경험이 있는데, 이것 자체가 볼륨이 굉장히 큰 업무라는 것을 알았습니다.

두 번째로, 성능 상 이슈가 없어야 합니다. 웹페이지가 초기 렌더링 되는 속도, virtualDOM 조작시 과도하게 리렌더링을 유발하지 않도록 하는 것 등에 신경을 써야합니다. 화면이 버벅이거나 깜빡 거리는 것에 예민해지고, 이슈를 발견하면 이를 개선할 수 있는 역량이 있어야 합니다. 이를 위해서는 Lighthouse나 flamegraph 등의 도구가 유용하게 쓰일 것입니다. 소속되어 있는 팀이 디자이너가 있을 만큼 충분히 크고, 디자인이 완벽하게 정해져있다면 성능 최적화를 잘하는 것이 핵심 역량일 것 같습니다.

마지막으로 웹 접근성에 대한 이해가 있어야 합니다. 웹 접근성을 지켜야 하는 근본적인 이유는 그것이 법적으로 의무이기 때문입니다. 이를 지키지 않으면 회사가 소송을 당할 여지가 있습니다. 특수한 상황에 처해있는 이용자들이 불편함을 느끼지 않도록 웹 접근성을 보장하는 개발을 해야합니다. 이에 대해서는 조만간 글을 정리해보겠습니다.

2. 빠른 속도로 구현하기

구현, 구현, 구현!

프론트엔드 개발자는 화면에 보이는 것 전부를 책임집니다. 그만큼 새로운 기능을 구현해야 할 일이 많습니다. 그래서 빠르게 구현하는 것이 정말 중요합니다. 이 때, 구현 속도는 단기적인 관점과 장기적인 관점에서 생각해볼 수 있습니다. 단기적인 관점에서는 요구사항을 정확히 파악하고, 이를 충족하면서 사이드이펙트를 발생시키지 않는 코드를 빠르게 작성하는 것이 중요할 것입니다. 이를 위해서는 JavaScript와 관련 프레임워크에 관한 이해가 필수적일 것입니다.

장기적인 관점에서는 코드를 어떻게 재사용할 것인지에 대한 고민이 반드시 필요하다고 생각합니다. 튼튼한 컴포넌트, 튼튼한 디렉토리 구조를 만들어서 요구사항이 많아질수록 작업효율이 높아지는 코드를 구축해야 할 것입니다. 이 때 고민해볼 수 잇는 것이 디자인시스템을 어떻게 코드에 담아낼 것인지 입니다. 토스 컨퍼런스에 디자인 시스템에 관한 영상을 보고 충격받았던 기억이 납니다. 생산성에 관한 고민은 비용절감이라는 회사의 이익으로 이어지기 때문에 반드시 필요하다고 생각합니다.

어떤 유튜브 클립에서 프론트엔드와 백엔드를 비교할 때 프론트엔드 코드는 백엔드 코드에 비해 수명이 짧다는 말을 본 적이 있는데, 이는 디자인 시스템 없이 기능 구현에만 급급했기에 나온 말이 아닐까 생각이 됩니다. 물론 늘 새롭게 구현해야 하는 기능들이 많지만, 디자인시스템 기반으로 구조를 잡는다면 프론트엔드 영역에서도 코드 수명을 높이고 생산성을 증가시킬 수 있을 것이라고 생각합니다.

3. 협업 능력 + 자신이 어떤 일을 하고 있는지 서술하는 능력

프론트엔드 개발자는 팀의 모두와 소통해야 하는 것 같습니다. 디자이너와 소통해야하고, 백엔드 개발자와 소통해야하고, 기획자와 소통해야 합니다. 자신이 어떤 작업을하고 있고 얼마만큼의 시간이 소요될 것이라는 것을 팀에게 알려야 합니다. 그래야 팀이 그에 맞춰 나머지 일정을 계획할 수 있기 때문입니다. 시간은 한정된 자원이기 때문에 팀의 미션 관점에서 자신 업무의 우선순위를 정하고, 요구사항을 조율하는 역량이 필요하다고 생각합니다.

마치며

이상으로 잘하는 프론트엔드에 관한 생각을 짧게나마 정리해보았습니다. 평소에 '프론트에서 잘하는 것은 무엇일까?' 라는 생각이 조각조각 둥둥 떠다니는 상태로 모호했는데, 글로 적으니 정리가 됐습니다. 아직 많이 부족하지만, 위에 적은 역량들을 만족할 수 있는 개발자가 되어야겠습니다. 🤗

Reference

https://blog.toss.im/article/toss-frontend-chapter

https://velog.io/@teo/frontend