비전공자를 위한 이해할 수 있는 IT 지식 6일차

TIL (Today I Learned)

2023.11.30

오늘 읽은 범위

6장 웹

책에서 기억하고 싶은 내용

1. 웹은 어떻게 이루어져 있고, 어떻게 동작할까?
1) 웹의 기본

 : 운영체제와 프로그램에 상관없이 일정한 형식이 언제나 동일하게 보이도록 하기 위해 HTML이 탄생했다. 정보 전달에만 초점을 맞추다보니 디자인을 입힐 수 있는 CSS가 탄생했고, 이 둘을 모두 작업하는 것을 퍼블리싱 작업이라고 한다. 최근 시맨틱 태그의 중요성이 강조되면서 HTML을 더 구조적으로 작업하는 것을 마크업 작업, 이런 작업을 주로 하는 분들을 마크업 개발자 라고 하기도 한다.

로그인, 회원가입, API를 통한 json 정보를 서버와 주고 받는 것은 별도의 프로그래밍 언어가 필요하며, 웹에서는 JavaScript를 이용한다. HTML과 CSS는 이 부분을 처리할 수 없기 때문에 프로그래밍 언어가 아니라는게 일반적인 관점이다.

크롬의 개발자도구를 이용해 Network 탭에서 데이터 전송 속도를 바꿔서 테스트해보거나, http 상태 코드 결과에 대해 확인할 수 있다.

Elements 탭에서는 작성된 HTML이나 CSS를 수정해볼 수 있는데 새로고침 하면 즉시 원상복구 된다.

이는 앱과 달리 웹페이지는 모두 서버의 원본 데이터를 복사해서 받아오는 사본이기 때문이다.

이처럼 웹은 앱의 심사 과정이 없기 때문에 서버에 원본 데이터를 교체하면 심사 없이 변화가 반영된다.

단, 유저가 업데이트 된 정보를 다운로드 해야 하는 것은 동일하나, 웹은 '새로 고침' 이나 '페이지 이동' 이 곳 새로운 다운로드를 의미하기 때문에 빠르게 반영된다.

반대로 웹은 그만큼 네트워크의 영향을 많이 받기 때문에 인터넷이 느리면 급격히 이상해진다.

앱은 웹보다는 효율적으로 네트워크의 영향을 조금 받도록 만들 수 있다. 예를 들어 앱 설치 후 오프라인에서 어플을 사용하다가 온라인 상태가 되면 동기화처리하는 방식을 들 수 있다.

 

2. 웹 개발하다가 못 해 먹겠다고 말하는 이유
2) 브라우저

 : 웹의 기본이 되는 HTML, CSS, JavaScript는 브라우저에서 동작한다. 대표적으로 크롬, 익스플로서, 파이어폭스, 오페라, 사파리 등이 있으며, 다운로드해 설치 후 이용한다.

설치한다는 건 브라우저도 하나의 앱이라는 의미다. 사용자에 따라 버전이 다를 수 있고, 사용하는 브라우저 종류 자체가 다를 수도 있다. 이 문제를 '브라우저 버전의 파편화' 라고 한다.

문제 해결을 '파편화를 잡는다'고 표현한다. 해외에 'caniuse.com'이라는 사이트가 유명한데, 특정한 기술이 사용 가능한지 확인할 수 있는 사이트다. 모두를 만족시키기 보다 '점유율'에 따라, 국내 서비스라면 국내 사용자 점유율에 따라 선택하는 편이 좋다.

3) 반응형으로 코딩하면 더 비싸나요?(그게 뭔데요?)

 : 과거 웹 페이지들은 양 옆을 빈 공백으로 자르고, 가운데에 콘텐츠가 모인 형태로 디자인 되었다. 시간이 흘러 스마트폰, 태블릿 등 기술의 발전과 다양한 기기가 생겨났고, 하나의 CSS로 다 해결할 수 없는 상황이 되었다.

이런 불편함을 해결하기 위해 등장한 기술이 '반응형 웹'이다. 

이름이 '반응형' 인 이유는 브라우저의 가로 넓이에 '반응'하여 구성 요소가 변하기 때문이다. 반응형 웹페이지는 브라우저의 크기를 변경했을 때 기본적인 색상은 유지하면서 레이아웃이 변한다. UI나 UX 측면에서는 좋지만, 개발하는 입장에서는 기기의 넓이에 따른 CSS를 추가로 코딩해야 하기 때문에 작업 시간과 비용이 더 많이 들어가게 된다.

4) 애플리케이션 이야기를 하는데, 왜 자꾸 웹 개발자에게 말하라는 거죠?

 : 유명한 브라우저 중 익스플로러(현재는 엣지), 사파리의 경우 각각 마이크로소프트, 애플에서 만들었다. 브라우저의 점유율은 곧 영향력, 돈으로 연결되기 때문에 각 회사는 점유율을 높이고 싶어 한다. 그렇기 때문에 맥을 구입하면 해당 맥 운영체제에는 사파리가, 윈도우는 익스플로러(엣지)가 기본 내장되어 있다.

운영체제 안에 브라우저가 내장되자 앱의 특정 부분을 브라우저로 처리하는 혼합된 앱이 생겨난다. 운영체제에 따라 정해진 언어를 사용해 제작한 앱을 '원주민' 이라는 뜻을 가진 '네이티브' 앱이라고 하고, 이렇게 혼합형 앱을 '하이브리드 앱'이라고 한다.

'하이브리드 앱'의 경우 브라우저 부분의 장점인 수정의 용이성이 있지만, 네트워크가 느리면 해당 부분의 화면이 빨리 보이지 않아 UX 측면에서 좋지 않다. 반면 네티이브 앱의 경우 운영체제별로 다른 프로그래밍 언어를 통해 수정한 뒤 심사신청 하는 등, 여러 단계를 거쳐야 하며, 심사가 끝나도 사용자가 업데이트를 직접 해야 하는 불편함이 있지만, 네트워크를 최소한으로 이용하도록 코딩하면 인터넷이 느린 환경에서도 빠르게 동작한다.

화면만 보고 이 둘을 확실히 구분하기는 어려우나 HTML 태그의 애니메이션 효과나 API문서를 살펴보는 것으로 구분할 수 있으며, 이에 따라 적합한 개발자에게 문의해야 한다.

 

오늘 읽은 소감은?

브라우저에 상관없이 사용자가 동일한 웹 페이지를 경험할 수 있도록 하는 크로스브라우징 이슈가 다뤄졌다. 시맨틱 태그의 중요성 때문에 예전처럼 표면적으로 큰 차이가 느껴지지는 않을 것이다. 하지만 아직 많은 회사들은 과거의 레거시 코드를 바탕으로 서비스를 제공하고 있을 것이고, 따라서 크로스브라우징 이슈는 현재 진행형이다.

기획자 입장에서 설명한 반응형 웹에 대해서도 인상깊었다. 최근 관계자에게 반응형 웹 수주가 개발자 입장에서는 좋지 않을 수 있다는 의견을 들었던 터였다. 비유하면 반응형 웹은 맞춤정장으로 코드의 재활용성이 떨어지고, 일반적으로 기업은 처리 기간이 늘어날 경우 개발자의 숙련도를 의심하지 비용을 더 지불할 의사는 없다는 것이었다.

 

※ 이 글은 비전공자를 위한 이해할 수 있는 IT 지식 - 최원영 저자를 기본 출처로 개인적인 공부내용을 요약한 것입니다.