KB IT's Your Life 7기 - 웹 인터페이스랑 친해지기

지난번에 KB IT's Your Life 7기 기자단 합격에 대해서 포스팅을 작성했던 것처럼, 기자단으로서 활동을 시작하게 되었다. 그리고 기자단의 일원으로서 TIL 형식의 교육 홍보 포스팅을 작성하는 미션을 받게 되었다. 하지만 미션의 내용이 심상치 않다. 미션의 내용은 바로 "웹 인터페이스 구축 교육 후기 작성" 이다.

 

사실 TIL 형식의 글을 작성하는 것은 어렵지 않다. 내가 그날 배운 기술들에 대해서 기록한 일, 새롭게 공부해야 하는 부분, 특히 중요하다고 생각되는 점에 대해서 나만의 글로 작성하면 되기 때문이다. 교육을 받으면서 굉장히 자세하게 메모를 하는 습관을 들이고 있었고, 그래서 TIL을 작성하는데에는 아주 자신감이 넘치고 있던 상태였다. 그날 그날 작성한 메모와 함께 TIL을 작성하려고 했으나...

 

쓰다보니 정말로 재미 없는 글이 되었다는걸 뒤늦게 깨달았다. 심지어 미션의 취지와도 거리가 멀어지는 듯 했다. 후기 글이라기 보단, 강의에 가까운 느낌이랄까. 그래서 며칠동안 작성하던 글을 완전히 엎어버렸다.

이건 내가 원했던 포스팅이 아니야

 

그러면 나는 도대체 무슨 글을 써야 하는가. 사람들이 이 글을 읽는 이유는 아무래도 "KB IT's Your Life"가 궁금한 것이 아닐까. 당장 나조차도 이 프로그램에 지원하기 전 다양한 포스팅을 읽으면서, 내가 가서 배울만한 곳인지를 더 자세하게 알고 싶었던 것 같다.

 

그렇다면 이 포스팅은 나의 성장 기록처럼 작성하면 되지 않을까? 라는 점에 착안해 포스팅을 다시 작성하기 시작했다. 그래서 이번 포스팅의 내용은 기술적인 이야기보단 경험 위주로 작성하는 것이 좋겠다는 생각이 든다. 그러면 약 3주간 나는 이곳에서 도대체 뭘 배웠을까? 

 

3월동안 배우는 것들

KB IT's Your Life 7기 [3월]

 

기술적으로 표현하자면, 나는 지금 웹 인터페이스 구축에 관해서 배우고 있다. 프론트엔드 개발자로서 성장하기 위해 필요한 지식들을 습득하고 있다고 생각하면 된다. 강의 시간은 오전과 오후 시간으로 나누어서 수업을 진행한다.

 

오전 시간 - Implementation ( 구현 )

오전 시간에는 Zoom 화상 회의를 통해서 대표 강사님이 각 챕터에 맞는 강의를 진행하신다. 웹에 대한 개요부터 웹 페이지 기본 구조, HTML5 의 태그와 양식, CSS를 비롯한 스타일 변경 방식과 레이아웃. 반응형 웹을 만드는 방법과 JavaScript 문법. 말 그대로 '웹을 구현하는 방법' 을 배우게 된다. 웹 개발에 대한 실습을 바탕으로 기술/도구 중심의 학습을 하는 것이다. 

오후 시간 - Enhancement ( 역량 강화 )

오후 시간에는 각 반별 주 강사님이 오전 시간에 배웠던 내용에 대해, 부족했던 내용을 보충해주신다. 가령 HTML 의 역사를 설명해주신다거나, HTTP의 Stateless의 속성이 나오는 이유에 대해서 설명해주신다. 기술적인 이야기보다, 조금 더 원론적인 이야기나 현업의 관점에서 '기술을 바라보는 시각'을 공유해 주신다. 물론 기술적인 배움도 필요하기에 오전시간에 배웠던 내용을 바탕으로 실습도 진행하게 된다. 

 

눈 감고 웹 기초 배우기

 

나는 수업을 듣기 전에 HTML과 CSS에 대해서 조금은 지식이 있는 편이었다. 그래서 수업을 듣는 과정이 부담스럽지는 않았던 것 같다. 하지만 배움에 있어서 언제나 완벽한 것은 없다고, 배웠던 내용을 다시 복습한다는 생각으로 교육을 들었다. 어차피 풀스택을 위해서면 '알고 있는 것' 그리고 '쓸 수 있는 것' 이 중요하기 때문이다. 그렇게 강사님들이 알려주시는 내용과 실습을 통해서 기초를 기르게 되었다.

 

1. HTML 배우기

 

다들 알 것이라고 생각하지만 HTML 코드를 작성하는 일은 생각보다 어렵다. 음, 어렵다기 보다는 알아야 할 것이 많다고 하는 편이 맞겠다. HTML의 태그의 개수만 찾아보더라도 정말 미치도록 많은 수가 있다. 내가 웹 인터페이스를 구현하기 위해서 해당 태그들을 전부 외워야 하는건 아니다. 하지만 적어도 이 태그가 무엇인지, 어떤 역할을 하는지에 대해서는 숙지가 되어야 한다는 뜻이다. 필요한게 있다면 사실 언제든지 공식 문서를 찾아보면 된다. 기본적인 태그들만 숙지하자.

 

이걸 외우라는 것이 아니다

 

HTML은 브라우저에게 우리가 사용할 컨텐츠들이 어떤 방식으로 구성되어 있는지를 설명해주는 Language일 뿐이다. 내가 보여줄 이미지가 어느 위치에 있는지를 설명하고, 내가 원하는 컨텐츠가 들어갈 공간을 마련해 주는 뼈대같은 역할이다. "이건 제목이고, 저건 아티클이야. 거기 있는 것은 링크야." 하는 게 전부다.

 

조금 실무적으로 들어가자면, HTML 문서를 만들 때, 다른 사람들이 읽기 편하고 의미(Semantic)를 파악하기 쉽게 만들어야 한다. 가령 <div> 태그를 이용해서 모든 레이아웃을 지정할 수 있지만, <header> 혹은 <footer> 와 같이 '의미가 있는' 태그들을 사용함으로써 가독성을 높이는 방법을 꾀해야 한다.

 

그러니 HTML을 배운다는 것은, 웹의 단순 구조에 대해서 배운다고 하는 것과 일맥상통한다고 할 수 있겠다. 직접 뼈대를 세워보고, 어떻게 웹브라우저에서 렌더링 되는지를 배우는 과정이었다. 

HTML이 하는 역할

 

0. 웹의 동작 원리

우리 반 강사님은 대표강사님이 다루는 내용 외적으로 기술에 대한 시각을 넓혀주신다. CS 전공자인 나에게 있어서 이런 부분의 교육이 더 도움이 된다고 느껴진다. 가령, 오전 시간에는 별로 다루지 않았던 OSI 7 Layers와 같은 네트워크의 기초적인 이론에 대한 설명을 해주시곤 한다. 그렇다고 우리가 네트워크 강의를 듣는 것이 아니기에 너무 깊게 들어가지는 않으신다. 그렇다고 해도 이론 위에 올려진 기술을 선호하고, 또 그렇게 성장하는 편이 중요하다는 이야기를 해주신다.

하루 분량의 메모 개요

 

교육 중에서는 단순히 프론트엔드의 기술적인 부분만 다루지 않고, 실제로 웹이 동작하는 원리에 대해서도 배운다. 당연한 이야기겠지만, 웹을 개발하는 사람이 웹이 어떻게 동작하는지도 모르고 있으면... 곤란하다. 물론 리모콘의 동작 원리가 무엇인지 몰라도 우리는 리모콘을 사용할 수 있다. 하지만 그렇게 내용물에 대한 지식을 블랙박스 상태로 두게 된다면, 언젠가 반드시 지식의 공백으로 인해 큰 문제가 발생할 것이다. 그렇기 때문에 오후 시간 주 강사님은 기술적인 이야기와 함께 원론적인 이야기도 함께 가르쳐주신다. 

 

해당 부분은 조금 정적인 부분이 많을 것 같아 따로 포스팅을 올려볼 생각이다.

 

2. CSS 배우기

HTML을 배운 후에, 이번에는 CSS를 배우기 시작했다. 사실 웹의 존재 의의가 정보 제공의 목적이라는 것으로만 생각한다면, CSS는 필요 없는 속성이다. 하지만 요즘 세상에 그 누가 HTML만 가진 웹을 보고 싶을까. 당장 첫날 HTML 태그들을 실습하면서 작성한 정보성 HTML 파일은 이런 모양으로 나온다.

 

이걸 원하는게 아니잖아

 

물론 정말정말로 정보 전달에만 목적을 둔다면 이것도 나쁘지는 않다. 하지만 우리는 언제나 더 이쁘고 귀여운걸 좋아한다. 단순 문서만 나타내는건 재미도 없고 감동도 없다. 그래서 우리는 CSS를 활용하게 된다.

 

CSS는 웹페이지에서 외형을 담당하는 역할을 한다. HTML이 뼈대라고 했으니, CSS는 피부라고 해도 되겠다. 우리가 심심치않게 사용하는 스킨이라는 단어 그대로의 역할인 셈. 블록에 색상을 입힐 수 있고, 위치를 조정하거나 폰트 사이즈를 키우거나, 이것 저것을 할 수 있게 만들어주는게 바로 CSS다.

 

그럼 CSS 수업에서는 어떤 내용을 배웠을까? 당연하게도 CSS 또한 HTML과 결이 비슷하다. 정형화된 틀이 있고, 해당 틀에 맞게 꾸미기만 하는 것이 전부. 사용 해보고 읽어본다는 것에 의의를 두는 과정이다. CSS에서 각각의 속성(Properties)들을 나열하는 일이 과연 이 포스트에 필요할지는 의문이다. 만약 CSS의 속성들이 궁금하다면 MDN의 자료를 읽어보는게 더욱 정확하고 빠르다.

 

오히려 CSS를 배우면서 수업시간에 '웹 접근성 (Web Accessiblity)'을 마련하는 방법에 대해서 배우게 되었다. 웹이 기본적으로 정보를 전달하는 목적을 가졌다는 것을 생각해보자. 정보를 제공하는 입장으로 생각하는 것이 아니라, 정보를 제공받는 입장에서 웹을 다뤄야 한다는 것이다. 

 

웹 접근성 ( Web Accessibility )

웹 접근성 ( Web Accessibility )

 

웹 접근성이란 무엇일까? 우리가 만들고 있는 웹 사이트가 정말로 잘 만들고 제대로 설계가 되었더라면, 일반적인 사용자 뿐만 아니라 장애를 가진 사람들도 이를 이용하는데 불편함이 없어야 한다는 것이다. 현재도 많은 사이트들이나 소프트웨어들은 접근성에 대한 장벽이 너무 크기에, 일부 사람들이 사용하는 것이 어렵거나 불가능하다고 한다.

 

HTML 태그를 사용해서 문서를 만들어보고, CSS 스타일을 잘 만드는 것도 중요하다. 하지만 접근성을 고려하는 것처럼 실제 사용자의 입장을 더 폭넓게 바라보는 시각이 필요하다는 것이다. 가령 시각적으로 장애를 가진 사람들은 스크린 리더기를 이용해서 웹페이지를 읽게 된다. 문제는 그들에게 사진 이미지에 대한 정보는 읽어줄 방법이 마땅치 않다는 점이다. 하지만 이 경우 리더기는 이미지 대체 텍스트가 있다면 해당 정보를 읽어주면서 사진 정보를 제공할 수 있다. 그리고 이런 기능을 하는 것이 <img> 태그의 alt 속성이다. 단순히 이미지가 로드되지 않았을 때 대체되어 나타나는 텍스트라는 의미 뿐만 아니라, 웹 접근성에 도움을 주는 속성이라는 것이다.

 

접근성 디자인이 중요한 이유

접근성 기능은 장애인을 위한 것만이 아니다.
변화하는 환경, 일시적 제약, 상황적 제약 속에 있는 모든 인간을 위한 것이다.

 

더욱이 접근성 기능을 제공하는 것은 단순히 장애인을 위한 것 뿐만 아니라, 핵심적인 일반 사용자들을 위한 문제도 해결해 줄 수 있다는 것이다. "가장 극단적인 사용자 문제를 해결하면, 일반 사용자 문제도 함께 해결된다." 라고 말할 수 있다.

 

이를 배우고 나서 웹 접근성에 대해서 조금 찾아보게 되었다. 웹 접근성에 대한 W3C의 공식 영상이 있으니, 관심이 있다면 한 번 시청해보면 좋을 것 같다.

 

 

솔직히 이런 부분은 내가 그다지 신경쓰고 있지 않던 부분이었다. 구조 구현, 스타일 완성에 초점을 두었지, 접근성을 챙겨야겠다는 생각은 가져본 적이 없었다. 하지만 실제로 이런 부분이 웹의 완성도를 좌우하는 중요한 속성이라는걸 알 수 있었다. 단순히 기술적인 측면 뿐 아니라 개발자의 본분을 다하는 방법을 배우는 느낌이었다. 이런 점들이 혼자 공부하는 상황에서는 쉽게 알 수 없는 부분이라고 생각한다. 

 

마찬가지로 UI/UX에 대한 사고의 확장까지 이어질 수 있는 내용이었다. 개인적으로 해당 주제에 대해서도 좀 더 공부하고 포스팅을 올리고 싶다는 생각이 있다.

 

3. JavaScript 배우기

HTML과 CSS를 배우고 난 후에, JavaScript를 배우기 시작했다. 자바스크립트는 하나의 프로그래밍 언어고, 우리가 웹 개발에서 프론트엔드의 메인으로 사용하는 언어라고 할 수 있다. JavaScript로 우리는 구조와 외형 뿐만 아니라 동작(Behavior) 에 관해서도 다룰 수 있게 된다.  프로그래밍 언어이기 때문에, 문법을 하나하나 배우게 된다. 하지만 역시나 자바스크립트 문법을 나열하는건 재미가 없다. 재미를 추구하며 JS를 가지고 백준 문제를 풀어내는 괴짜도 아니기 때문에 JavaScript에 대한 문법적인 내용으로 작성하고 싶지는 않다.

 

하지만 JavaScript의 설계도 ECMA Script라면 어떨까? 수업시간에서 자바스크립트 뿐만 아니라 ECMA Script에 대해서도 언급을 자주 하신다. 우리가 사용하고 있는 자바스크립트가 사실은 ECMA Script라는 표준을 기반으로 하는 엔진의 결과물이라는 점이다. 다시 말해, ECMAScript는 JavaScript 언어가 어떻게 동작해야 하는지를 정의한 공식 표준이라고 생각하면 된다.

 

ECMAScript에서 변수 선언 방식이나 함수 동작 방식. 객체 모델이나 실행 컨텍스트 / 콜 스택. Promise, async/await 와도 같은 비동기 모델 등 다양한 표준을 만들어오고 있다. 그리고 이런 문법이 탄생하게 되는 흐름을 실습을 통해서 배우게 된다. 가령 Callback Hell을 피할 수 있는 Promise의 등장이 있겠다.

Callback HELL

 

물론 단순히 Callback Hell을 피하기 위해서 Promise가 탄생한 것은 아니지만, 이해하는데 도움이 되는 방식이다. 아쉬운점은 수업시간에 Promise를 비롯해 async/await 과 같은 비동기 처리에 대해서 간단하게 짚고 넘어갔다는 생각이 든다. 아쉬운 자가 우물을 판다고, 이 점은 내가 따로 자료를 찾아서 공부하게 되었다. 기회가 된다면 비동기 처리에 대한 포스팅을 올릴 계획이다.

 

4. Document Object Model ( DOM ) 배우기

HTML, CSS, JavaScript를 모두 배웠으니 하나의 웹페이지를 구축할 수 있게 되었다. 그리고 드디어 HTML을 다루는 방법에 대해서 배우기 시작했다. Document Obejct Model ( DOM ) 이란, 브라우저가 HTML 태그를 자바스크립트에서 사용할 수 있는 객체로 만드는 것이다. 더 엄밀하게 표현하자면, 브라우저가 HTML 파일을 하나의 Tree 자료구조형으로 표현함으로써 JavaScript가 이 Tree Structure와 상호작용할 수 있도록 만들어주는 Programming Interface다.

 

DOM Tree Structure

 

CS 자료구조 시간에 배우고, 평생 써먹는 트리형 자료구조다. 사실 이만큼 직관적인 자료구조가 없다. 부모-자식 관계를 명확하게 보여주고, 계층도 나눌 수 있으니 얼마나 편리한 방법인가. 재밌는건, 이 트리 구조가 하나의 Object(객체) 로 사용된다는 것이다. 그래서 `querySelector`로 우리가 원하는 element들을 가져올 수 있다.

 

window
 └ document
     └ DOM elements

 

실제로 조금 더 엄밀히 따지자면, `window` 객체가 브라우저 환경에서 최상위 전역 객체 (Global Object)가 된다. `document` 객체는 현재 HTML 문서를 표현하는 객체가 된다고 생각하면 된다. 이후에는 DOM을 어떻게 다루는지에 대해서 배우게 된다. pseudo selector 실습을 해본다거나 EventListener를 붙인다거나 하는 과정이 있었다.

 

 

---

 

빠른 진도를 쫓아가는 나의 모습

 

실습을 하면서 느끼는 점이지만, 단순히 코드를 읽고 따라서 치는 것보다 원리에 대해서 좀 더 생각하는 과정이 중요한 것 같다. 웹 페이지 구현도 물론 중요하지만 찬찬히 뜯어보면 해당 기능의 탄생한 이유가 조금씩 보이게 된다. 특히 동기/비동기 처리를 배울 때 굉장히 의아스러운 부분이 있었는데, 그건 바로...

 

JavaScript는 싱글스레드로 처리된다

 

 

 

웹 개발은 단순해야만 한다. 그래야지 비전문가도 쉽게 구현할 수 있으니까 말이다. 그래서 자바스크립트는 싱글스레드를 선택했다. 문제는 사용자에게 보다 빠른 결과를 보여줘야 한다는 것이다. 웹 상에서 로딩창을 기다리는 것만큼 지루한 것이 없다. 웹 서비스 제공자의 입장에서 성공하기 위해선 유저의 경험이 제일 중요하다. 그러기 위해서 비동기 처리를 사용해야만 한다. 그런데 싱글스레드로는 비동기 처리가 사실상 불가능하다. 싱글스레드는 말 그대로 실행 흐름이 하나라는 뜻이기 때문이다.

 

하지만 실제로 우리는 비동기 처리가 가능하다.

설계의 철학이 느껴지지 않는가? 

 

사실 내용을 살펴보면 별건 없다. 간단하게 말하자면 자바스크립트가 웹브라우저에게 비동기로 처리할 일거리를 던져주고 자기 할 일을 하는 것 뿐이다. 이후로 Node.js와 Vue.js의 기초를 배우기 시작했다. 하지만 해당 영역은 웹의 기초는 넘어섰다고 생각해서 이번 포스팅에선 제외했다.

 

교육을 받은지 대략 3주가 지나고 있다. 현재 KB IT's Your Life를 들으면서 자격증 공부를 병행하고 있다. 교육 도중에 SQLD 자격증을 취득하게 되었다. 자격증 공부와 블로그 포스팅을 병행하게 되니 시간이 약간 모자란 감이 있지만, 조금씩 발전해가는 느낌이 들어 내심 기분이 좋다.

 

KB IT's Your Life 7기 기자단