올해 목표를 세우며, 앞으로의 방향성에 대해 고민하던 중 개발자로 일하며 느낀 점들을 정리해 보고 싶었습니다.
교육을 수료하고, 신입 개발자로 일을 시작한 지 8개월이 지나가는 이 시점에서 그동안 머릿속에만 있던 생각과 경험을 글로 남기면서 스스로를 돌아보고, 앞으로의 성장을 다짐하려 합니다.
본문은 편의상 평어체(반말)로 작성했습니다.
반성의 시간
그동안의 커리어를 크게 정리하자면 사내에서 쓰일 운영툴을 만들고, 강의와 전자책을 볼 수 있는 뷰어를 만드는 작업을 했다.
개발자가 없었던 조직에서 일을 시작하게 되었고, 프론트엔드와 관련된 개발은 처음부터 맡아서 살을 붙여나갔다.
마치 교육 중 프로젝트를 하듯이 말이다.
작은 규모의 팀에서 여러 스프린트를 거치며 깨달은 건 프론트엔드 개발자는 단순히 화면을 만드는 일을 넘어 다양한 부분을 신경 써야 한다는 것이었다.
초기에 웹 개발을 배울 땐 단순 기능 구현에만 급급했고, “React와 Typescript만 다룰 수 있으면 충분하지 않을까?”라고 생각했다.
그러나 실무에서 운영을 해보면서 UX, 성능, 접근성 등 훨씬 많은 요소들을 신경 써야 한다는 걸 깨닫게 되면서 내 생각이 단편적이었다는 것을 알게 되었다.
특히 기억에 남았던 건 UX를 고려했다고 생각했지만, 실제로는 사용자의 입장에서 충분히 고민하지 못했다는 점이다.
내가 중요하다고 여긴 부분이 정작 사용자에게는 불편함을 줄 수도 있다는 사실을 체감하며, "어떻게 하면 더 나아질 수 있을까?"라는 고민이 깊어졌다.
이 외에도 명확히 설명하기 어려운 답답함을 느꼈다.
그러던 중 링크드인에서 우연히 프론트엔드 역량 테스트를 보게 되었다.
해당 사이트에 적힌 역량들을 보면서 내가 놓치고 있던 부분들이 많았음을 깨달으면서 약간의 자괴감을 느꼈다.
정해진 기간에 맞게 기능 구현에만 급급했던 나는 테스트 코드, 클린 코드, UX, 접근성 등 기본적이고 중요한 부분들을 간과하고 있었다.
그 사실을 인정하며, 더 나아지기 위해 노력하기로 했다.
어떤 것을 먼저 배워야 하는 것인지 방황하던 무렵 사내에서 진행되는 리팩토링에 대한 스터디에 참여하고 있었다.
(읽었던 책 : 프로그래밍의 규칙 )
해당 스터디에 참여하면서 많은 깨달음을 얻었다.
주요 주제는 간단했다: 코드를 간결하고 명확하게 작성하자. 미래의 나와 동료를 위해.
이를 통해 좋은 코드, 클린 코드가 무엇인지 고민하기 시작했고, 그에 대한 해답을 토스에서 나온 Frontend Fundamentals 에 적힌 글들과 GitHub Discussions에서 새로운 인사이트를 얻었다.
지금까지 작성한 코드는 사용자와 동료를 충분히 고려하지 않은 경우가 많았다.
앞으로는 더 나은 동료가 되고, 좋은 서비스를 제공하기 위해 다음의 점들을 중심으로 개선하고자 한다.
프론트엔드 개발 시 고려해야 할 점
지금까지의 경험을 바탕으로, 프론트엔드 개발 시 어떤 것을 고려해야 하는지 정리해 보려고 한다.
1. 사용자 경험(UX)
- 직관적인 인터페이스
사용자가 쉽게 기능을 이해하고 사용할 수 있는 인터페이스를 설계해야 한다.
버튼, 메뉴 등 사용자의 입장에서 직관적이어야 한다.
가끔 막힐 때는 동료나 다른 분들에게 부탁해서 피드백을 미리 들어봐야겠다고 다짐했다.
- 반응형
화면 크기나 디바이스 종류에 따라 적절하게 동작할 수 있도록 반응형으로 구현해야 한다.
이는 사실 제일 많이 신경 쓰고 있던 부분이지만 더 세심하게 신경 써야겠다.
- 사용자 행동에 피드백 제공
사용자가 어떤 행동을 했을 때 명확하게 피드백을 제공해줘야겠다고 느꼈다.
로딩 스피너, 알림 메시지 등을 제공해서 사용자가 혼란스럽지 않게 만들자.
- 일관성 유지
디자인 시스템이 따로 구축되어 있지 않는 환경에서 내가 제일 신경 썼던 부분이다.
올해 할 수 있다면 디자인 시스템을 구축해 보는 것이 목표다…
일관된 UI/UX를 유지할 수 있도록 하자.
2. 성능 최적화
- 로딩 속도
로딩 속도를 최소화하기 위해 코드를 최적화하고 필요한 리소스를 최소화하자.
이미지 최적화, 코드 분할, 캐싱 활용 등을 통해 초기 로딩 시간을 줄이는 방법을 적극적으로 도입하기 위해 알아볼 계획이다.
- 지연 로드(Lazy Loading)
로딩 속도와 더불어서 필요한 시점에만 데이터를 로드하거나 렌더링해서 초기 로딩 시간을 줄이자.
- 브라우저 최적화
다양한 브라우저 환경에서 동일한 성능을 보장하기 위해 브라우저 호환성을 테스트해야 한다.
개발할 때 늘 같은 기기에서만 테스트를 해봤는데, 알고 보니 다른 기기에서는 매우 느리거나 안 보이는 등의 현상을 발견한 적이 있다.
다양한 환경을 고려할 수 있도록 하자.
- 캐싱 활용
프론트에서 브라우저 및 서버 캐싱을 통해서 반복적으로 불러오는 리소스를 효율적으로 관리할 수 있어야 한다는 것을 뼈저리게 느꼈다.
캐싱 관리하는 부분이 내게 조금 약했던 것 같다.
3. 접근성
- 웹 표준 준수
HTML 시맨틱 태그와 WAI-ARIA 속성을 올바르게 활용하자.
현재는 AI 기반 코드 리뷰 툴을 활용해 표준을 점검하고 있다.
- 키보드 내비게이션
키보드만으로도 기능을 사용(조작 가능)할 수 있도록 설계해야 한다.
생각보다 마우스 없이 키보드만으로도 사용하는 사람이 많다는 것을 알게 되었다.
- 스크린 리더 호환성
시각 장애인을 위한 스크린 리더 sw와의 호환성도 고려해야 한다.
적절한 alt와 ARIA 속성을 사용하자.
- 컬러 대비
색맹이나 저시력자를 위해 적절한 색상 대비를 제공해야 한다.
이 부분은 디자이너의 부재에도 불구하고 잘 지켰던 것 같다.
앞으로도 잘 지키고자 해야겠다.
4. 코드 품질
- 가독성
클린 코드라고 불리는 것들은 대부분 코드가 간결하고 명확하다.
또, 변수명과 함수명이 기능을 직관적으로 설명할 수 있게 되어 있다.
미래의 나와 동료들을 위해서 명심하고 또 명심할 것…
변경하기 쉬운 코드 - 자주 보기…
- 재사용성
반복되는 코드를 최소화하고 재사용할 수 있는 컴포넌트를 작성해야 한다.
이 부분은 늘 염두하고 코드를 작성하지만 여전히 어렵다. 그래도 꾸준히 노력할 것.
- 테스트 작성
작성한 기능에 대해 단위 테스트(Unit test), 통합 테스트를 작성해서 오류를 최소화할 수 있도록 하자.
테스트를 통해 내가 예측하지 못했던 버그들을 발견하거나 실수를 줄일 수 있다.
- 모듈화
각 기능을 독립적인 모듈로 분리해서 유지보수가 쉽도록 설계해야 한다.
한 번 만들었다고 끝인 게 아니라 기능이 추가될 수 있다는 것을 염두에 두자.
UI와 비즈니스 로직을 분리해 확장성을 고려하자.
- 폴더 구조 설계
프로젝트가 커질 때를 대비해 폴더 구조를 체계적으로 설계해야 한다.
처음에는 혼자서 진행했고, 기능이 많지 않았지만 점점 커지게 되면서 폴더 구조를 동료와 갈아엎은 적이 있다.
이때 느꼈던 것은 기능별, 도메인별, 레이어별 등 잘 설계해야겠다고 느꼈다.
- 의존성 관리
사용 중인 라이브러리와 패키지의 버전을 정기적으로 점검하고, 필요하지 않은 의존성은 제거해야 한다.
필요하지 않은 의존성은 그때마다 제거를 잘했던 거 같은데, 라이브러리와 패키지 버전은 정기적으로 점검해야겠다는 생각이 들었다. (recoil이 사라진 것을 보면…)
5. 보안
- 데이터 검증
사용자의 입력 데이터를 검증해서 보안 취약점을 줄여야 한다.
아직 입력을 받는 곳이 많지는 않지만, XSS(Cross-Site Scripting)나 CSRF(Cross-Site Request Forgery) 같은 공격에 대비해야 한다고 생각한다.
- 민감 정보 보호
민감한 데이터를 브라우저에 저장하지 말고, 암호화된 형태로 관리해야 한다.
앞으로 개발할 부분과 연관되어 있는데, 주의하도록 하자.
6. 국제화 및 지역화
- 다국어 지원
다국어 사용자를 위해 텍스트를 코드에서 분리하고, 국제화(i18n)와 지역화(l10n)을 고려해야 한다.
앞으로 트래픽이 커지면서 거쳐야 하는 작업일 것이다. 미리 알아둘 것.
- 날짜/시간, 통화 및 숫자 형식
날짜와 시간 형식을 고려해서 라이브러리를 선택하고(moment.js, day.js 등), 지역별 통화 및 숫자 포맷도 유연하게 처리할 수 있도록 설계해야 한다.
7. 애널리틱스 및 모니터링
- 사용자 데이터 수집
Google Analytics, Amplitude 등의 도구를 사용해 사용자 행동 데이터를 분석할 수 있도록 하자.
아직 부족한 부분인데… 필요하다고도 생각하고 해보고 싶은 부분이다.
- 오류 추적
Sentry, LogRocket 같은 도구를 통해 사용자 환경에서 발생한 오류를 추적하고, 문제를 빠르게 해결할 수 있도록 해야 한다.
추적할 수 있도록 에러 로그를 남기는 부분이 여전히 어려워서 더 알아보려고 한다.
내가 모르는 에러를 사용자가 보고 있을 수도 있다는 게 좋지 않다고 생각한다.
- 성능 모니터링
Lighthouse, WebPageTest 등을 활용해 사이트 성능을 정기적으로 측정하고 개선하자.
기능 구현에만 급급했는데, 성능적인 부분도 고려해야 함을 잊지 않으려고 한다.
마무리
이번 글을 통해 그동안의 부족함을 돌아보고, 앞으로 나아갈 방향을 정리할 수 있었다.
최근 느낀 바는 좋은 코드는 사람을 위해 쓰는 코드라는 것을 다시 한 번 깨닫게 되었다.
보이는 화면은 사용자에게, 보이지 않는 코드 단은 동료와 미래의 나를 위해 작성하자.
앞으로도 이런 마음가짐을 잊지 않고 배우고 성장하며 더 나은 개발자가 되기를 꿈꾼다.
1년 뒤에 다시 이 글을 다시 읽었을 때는 지금보다 더 성장해 있기를 바란다.