KB IT's Your Life 7기 - 프론트엔드 교육을 들으며

길다면 길었고 짧다면 짧았던 프론트엔드 교육이 마무리가 되었다. 그리고 이번 주 미션의 내용은 프론트엔드 교육 후기를 작성하는 것이다. 그런데 4주차에도 비슷한 주제로 포스팅을 작성했었는데...? 그러면 이번에는 어떻게 글을 작성해야 할까. 4주차에서는 Vue.js에 초점을 맞춰서 포스팅을 작성했으니, 이번에는 프론트엔드 전반에 대한 나의 회고 겸하는 프론트엔드 전체 교육 후기로 작성해보는게 어떨까 생각했다.

 

1개월차 달성

 

KB IT's Your Life 7기에서는 대략 7스탭으로 커리큘럼을 제공하고 있다. 그 중 가장 첫 번째 스텝이 바로 프론트엔드 개발이다.

 

6주간의 교육에서 HTTP 프로토콜 양식부터 HTML5의 양식, CSS의 다양한 속성도 배웠고, 웹의 동작을 담당하는 자바스크립트도 배웠다. 자바스크립트로 DOM을 조작하는 방법도 배우고, 자바스크립트 런타임인 Node.js도 배웠다. 빠른 스타일 개선을 위한 부트스트랩, 이후에는 Vue 프레임워크의 전반을 배우면서 Single Page Application 방법론, Vue에서 반응성을 제공하는 방법, 라우팅과 Axios, 전역 반응형 상태처리 기능인 Pinia까지 배우게 되었다.

 

1개월동안 배우는 것들

 

이렇게 나열해보니 짧은 시간에 비해서 생각보다 꽤나 많은 내용을 배웠다는 생각이 든다. 솔직히 말하자면 처음에는 프론트엔드 교육은 그저 웹 페이지를 만들어보는 수업이라고 생각했다. '프론트엔드 그거 뭐 별거 있나' 라는 생각을 안했다면 거짓말이겠지. 하지만 막상 교육을 듣고 나니 프론트엔드라는 영역이 생각보다 훨씬 넓고 깊다는 점을 새삼 느끼게 된다.

 

프론트엔드 교육을 들으면서 들었던 웹 개발에 대한 생각의 변화를 한 사진으로 표현하자면,

프론트엔드의 진실

 

위 사진이 프론트엔드와 백엔드를 아주 잘 설명해주는 예시인 것 같다. 프론트엔드는 사용자에게 "보여지는" 속성을 담당하는 것이다. Vue 프레임워크는 단순히 HTML과 CSS, JavaScript를 조금 더 쉽게 사용할 수 있도록 만들어줄 뿐이고, 그 역할은 크게 다를 바가 없다는 것이다.

 

... 라는 것이 교육 이전까지 들었던 생각이다. 밈적으로 소비되는 하나의 프론트엔드/백엔드 사진이다. 사실 지금도 이때의 감상과 크게 다르지 않다고 생각한다. 하지만 조금 다른 점이 있다면, 이 사진이 왜 진짜로 프론트엔드와 백엔드를 완벽하게 설명하는지 느낄 수 있게 되었다. 왜 이 사진이 절묘하다고 느껴지는 걸까? 그것은 사용자 User의 특성을 완벽하게 이해하고 만들어졌기 때문이다.

 

프론트엔드는 사용자에게 "보여지는" 속성을 담당한다. 그것은 다시 말해서 "무엇을", "어떻게", "왜"  보여지는지를 담당한다는 의미가 된다. 사진에서 User는 한 명의 아기로 표현된다. 현재 아기와 아빠가 해결해야 하는 문제는 무엇일까? 아이는 현재 배가 고파서 젖을 먹고 싶어한다. 하지만 젖은 엄마가 주는 것이지, 아빠가 젖을 줄 수는 없지 않은가? 하지만 아빠도 아기에게 젖을 주는 방법이 하나 있다. 그것은 바로, 분유를 먹이는 것이다.

 

하지만 아기에게 분유를 그냥 먹일 수는 없다. 아이는 배가 고파도 안정감을 느끼지 않으면 젖을 물지 않기 때문이다. 그렇다면 아기는 무엇을 보았을 때 안정감을 느낄까? 보통의 아기들은 아빠의 얼굴보다는 엄마의 얼굴을 보는 걸 더 좋아한다는 경향이 있다. 그래서 아빠는 아기에게 안정감을 제공하기 위해서 자신의 얼굴에 스크린을 달아서 "엄마"의 사진을 보여주게 된다. 

 

그렇게 아이는 아빠의 손에서도 엄마의 얼굴을 보고 젖을 먹는다는 경험을 하게 된다. 

 

이것이 프론트엔드 개발자의 역할이 된다. 문제를 파악하고, 사용자를 분석하고, 현재 가용할 수 있는 방법을 골라 문제를 해결해준다. 그렇게 했을 때 소비자는 개발자가 제공하는 환경에서 불편함을 덜어낸 경험을 하게 된다. 다시 말해, 프론트엔드 개발자는 단순히 화면 구현 뿐만 하는 것이 아니라, 위와 같은 과정을 거쳤을 때 비로소 제 역할을 하게 된다는 것이다. 그리고 그 기능의 경험을 제공하는 것이 이제 백엔드가 되시겠다.

 

웹 접근성

 

이 내용은 지난번에 작성했던 웹 접근성에 대한 이야기와도 밀접한 관련이 있다. 나는 웹 페이지를 만든다고 하면, 잘 배치된 레이아웃과 깔끔한 색상, 보기 좋은 화면을 먼저 떠올렸던 것 같다. 물론 그것도 중요하다. 하지만 정보를 제공받는 사람의 입장에서 생각해보면 이야기가 조금 달라진다.

 

어떤 사용자는 이미지를 볼 수 없을 수도 있고, 어떤 사용자는 마우스보다 키보드에 의존할 수도 있고, 어떤 사용자는 익숙하지 않은 환경에서 페이지를 이용할 수도 있다. 그런 사람들에게도 불편하지 않은 웹을 만드는 것은, 사용자를 분석하고 배려하는 노력이 담긴 산물이라는 것이다.

 

Vue Binding

 

또 하나 흥미로웠던 것은 Vue를 배우는 일이 단순히 문법을 익히는 일이 아니었다는 점이다. MVVM 패턴, 컴포넌트 설계, 상태와 뷰의 관계 같은 이야기까지 함께 따라오다 보니, 점점 “코드를 어떻게 쓰는가”보다 “어떻게 나누고 연결할 것인가”를 더 많이 생각하게 된다. 예전에는 동작만 하면 된다고 생각했던 코드가, 이제는 읽기 쉬운가, 재사용 가능한가, 상태의 흐름이 자연스러운가 같은 기준으로 다시 보이기 시작했다. 물론 쪼갤 수 있다고 여러 컴포넌트로 쪼개다보면, 오히려 보기 어려워지는 경우가 자주 있다...

아직도 어려운 Vue

 

당연하게도 아직은 프론트엔드를 완벽하게 이해했다고 말하기는 어렵다. 오히려 배우면 배울수록 내가 잘 모르고 있다는 점을 더 자주 느낀다. 하지만 그런 와중에도 분명한 것은, 프론트엔드 개발에는 단순히 예쁜 화면을 만드는 기술만 추구하는 것이 아니라는 점이다.

 

구조를 설계하고, 사용자의 행동을 예상하고, 변화하는 상태를 관리하며, 결국 더 나은 경험을 제공하는 방향으로 계속 고민하게 만드는 영역이라는 점을 이번 교육을 통해 조금씩 체감하게 되었다.

 

프론트엔드의 길은 멀고도 험하다

 

지금은 Vue.js 프레임워크만으로 프론트엔드 교육이 끝났지만, 세상에는 더 많은 프론트엔드용 프레임워크들이 존재한다. 가령 Vue 앱이 검색이 잘 안된다는 단점을 보완하기 위해서 서버 사이드 렌더링과 정적 사이트 생성을 도와주는 Nuxt 프레임워크를 꼽을 수도 있겠다. 아니면 이전에 사용해봤던 Next.js도 마찬가지다. 어느 것을 사용하는지는 결국 요구되는 상황과 개인의 기호에 맞게 고르는 작업이 필요하겠지.

 

다음주에는 현재 진행하고 있는 스켈레톤 프로젝트에 관한 포스팅을 올리게 될 예정이다. Vue.js를 이용해서 가계부 앱을 만드는 팀 프로젝트다. 기능 구현에 대한 문제와 프로젝트 관리에 대한 문제, 일련의 작업들을 처리하는 과정에 대한 문제들이 왕왕 발생하고 있다. 그래서 다음주는 조금 쓸 내용이 많아질 것 같다는 예감이 든다.

KB IT's Your Life 7기 기자단