비전공자를 위한 이해할 수 있는 IT 지식 #2

 

 

 

6장 웹

1. 브라우저에 대해서 이야기해보겠습니다.

브라우저가 하는 일은 HTML에 적힌대로 정보를 보여주고, CSS에 적힌 대로 디자인을 입혀주며, JavaScript에 적혀있는 그대로 동작합니다.

 

 

 

 

크롬은 대표적인 브라우저 중 하나로 다운을 받아 설치하여 사용할 수 있습니다.

 

 

 

 

 

다만, 여기서 다운을 받아 설치를 해야된다는 것은 어떤 의미가 있을까요?

그것은 바로 크롬이 '애플리케이션'이라는 것입니다. (다른 브라우저들도 마찬가지입니다)

 

 

 

 

브라우저 버전의 파편화

애플리케이션은 사용하는 사람에 따라서 버전이 다를 수 있고 브라우저 자체도 다를 수 있습니다.

각 브라우저는 서로 다른 애플리케이션이기 때문에 브라우저에 따라 그 안의 구현 방식이 달라 HTML, CSS, JavaScript의 특정 기능이 버전별로 브라우저별로 작동할 수 있고 아닐 수 있다는 의미입니다. 그래서 웹프론트 개발자는 소비자의 브라우저 버전과 종류에 맞춰 정상적으로 동작할 수 있도, 추가로 코드를 작성해야 합니다.

 

 

 

 

 

이런 문제를 해결을 위한 코딩을 '파편화를 잡는다'고 표현합니다.

 

 

 

 

 

'저 많은 브라우저의 파편화를 어떻게 잡을까?'  생각이 들 수 있지만 중요한 건 '점유율'입니다. 세계 점유율을 확인해보고 국내 서비스라면 국내 사용자 점유율을 조사해보고, 따져봐야 합니다. 이러한 고민은 개발자만의 것이 아니며 시장과 소비자에 대해 이해도가 높은 사람들이 있다면 함께 고민하고 의사 결정해야 합니다.

 

 

 

 

 

2. 반응형 웹에 대해서 알아보겠습니다.

'웹 페이지를 만들 때 양옆을 잘라서 적당한 해상도를 맞추면 다들(모니터 별) 비슷하게 보이겠구나!' 라고 과거의 웹 페이지들은 가운데에 컨텐츠가 모여있는 형태로 디자인되어 있습니다. ex. 네이버, 다음 (화면을 축소해보면 더 명확하게 확인 가능)

 

 

 

 

네이버 화면 캡쳐

 

 

 

 

 

 

하지만, 시간을 흘러 스마트폰과 테블릿이 등장하면서 화면이 잘라서 잘려서 보이는 이슈가 발생했습니다.

네이버나 다음 같은 회사들은 '모바일용 웹 페이지'를 따로 만들었지만, 모바일과 웹 페이지를 따로 만들어 출시한다는 것은 불편함을 발생시킵니다. ex) 디자인을 바꾸기 위해 서로 다른 css파일을 수정(작업이 중복 =>  비효율, 버그 발생 가능성 상승)

 

 

 

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

반응형인 이유는 브라우저의 가로 넓이에 '반응'하여 구성 요소가 변하는 기술이기 때문입니다.

 

 

 

 

3. 하이브리드 애플리케이션에 대해서 알아보겠습니다.

각 운영체제 안에서 프로그램을 개발하기 위한 각각의 프로그래밍 언어가 존재합니다. ex) ios program - Objective-C, Swift

이 언어들로 개발한 애플리케이션을 '네이티브 애플리케이션'이라고 합니다. 여기서 '네이티브'란 원래 정해놓은 언어들 사용해 운영 체제 자체 기능을 사용했기 때문에 '원주민'이라는 뜻을 의미합니다.

 

 

 

하지만 운영체제 안에 브라우저가 내장되자 새로운 방식으로 애플리케이션 개발이 가능해졌습니다. 애플리케이션 특정 부분에 '브라우저'를 올리는 방식으로 '하이브리드 애플리케이션'이라고 합니다. 

 

 

 

하이브리드 애플리케이션과 네이티브 애플리케이션의 장단점

하이브리드 애플리케이션은 HTML, CSS, JavaScript를 가져와서 보여주는 방식은 수정하기 편하고 따로 심사 받거나 설치할 필요가 없는 장점이 있지만 네트워크에 종속되기 때문에 느린 공간에 가면 HTML, CSS, JavaScript를 모두 다운로드하는 동안 사용자들이 기다려야 합니다.

 

 

 

 

네이티브 애플리케이션은 수정하게 됐을 경우에 심사를 받아야 되는 것과 사용자들이 직접 업데이트를 해줘야 되는 단점이 있지만 잘 만든 애플리케이션은 사용성이 좋다는 장점이 있습니다. 네트워크를 최소한으로 이용하도록 코딩한다면 인터넷이 느린 환경에서도 빠르게 동작합니다 ex. 에버노트

 

 

 

 

이 둘을 화면만보고 확실히 구분하는 방법은 없지만 힌트는 있습니다. 하지만 API 문서를 보는 것이 가장 확실합니다. 

 

 

 

 

 

 

7장 데이터베이스와 이미지 처리

쇼핑몰에서 데이터는 '회원명', '아이디', '주문 상품명', '상품 가격' 등이 데이터로 텍스트 형식입니다. 문제는 서로 관계가 이어진 텍스트들은 관리하기가 매우 힘들다는 사실입니다. 

 

 

 

 

데이터의 '무결성'

데이터는 단 1%의 결점도 없어야 합니다. 그래서 데이터를 관리하는 게 어렵습니다.

예를 들어, 한 은행의 고객이 100,000명 중 1%의 오류가 발생한다면 1,000명의 고객이 은행 관련 불편함을 겪게 된다는 것인데 이런 피해를 입은 사람들이 회사에 컴플레인 걸고, 심하다면 소송에 들어갈 수 있습니다. 그래서 데이터를 다루는 사람들은 보수적일 수 밖에 없습니다. 쉽게 변화를 허용하지 않으며, 만약 작업이 필요하다면 점검 시간을 잡아두고, 아주 안전하게 작업합니다. (백업, 업데이트 뒤 테스트)

 

 

 

 

 

많은 양의 데이터 관리

서버스가 운영되면 데이터는 계속 쌓입니다.

예를 들어, 회원은 과거부터 오늘, 미래에도 결제할 것이기 때문에 결제 데이터는 계속 쌓이게 됩니다. 이렇게 100,000,000개의 텍스트 파일이 만들어졌다고 가정해보았을 때, 만약 특정 회원이 성별을 수정했다면 1 ~100,000,000까지 데이터를 찾고 바꿔야합니다. 또한, 1 ~ 100,000까지 1초가 걸렸다면 100,000,000까지는 10,000초가 필요하며 2.77시간이 걸리게 되는데 소비자는 절대 이런 상황을 이해해주지 않습니다. 

 

 

 

이런 데이터를 다루기 위해 많은 사람들이 선택한 방법론이 '관계형 데이터베이스(RDBM)'입니다. 관계형 데이터베이스의 철학으로 만들어진 관리 시스템(소프트웨어)을 관계형 데이터베이스 관리 시스템(RDBMS)이라고 부릅니다. ex) MySQL, MariaDB

 

 

 

---

 

 

 

CPU는 컴퓨터의 머리, 보조기억장치는 컴퓨터의 창고, 메모리는 CPU의 개인 작업공간입니다. 

 

 

 

데이터는 보조기억장치에 저장됩니다. DBMS는 소프트웨어입니다.

 

 

 

이 말은 CPU와 메모리가 있다면, 데이터베이스 관리 시스템을 실행할 수 있다는 말입니다. 클라이언트와 서버는 컴퓨터이기 때문에 모두 CPU, 메모리, 보조기억장치를 가지고 있습니다. 그렇다면 클라이언트와 서버 컴퓨터 위에는 모두  DBMS을 돌릴 수 있고, 데이터를 저장할 수 있다는 말입니다.

 

 

 

 

 

개발 이슈에 따라서 클라이언트 베이스 데이터베이스와 서버 베이스 데이터베이스가 다릅니다. 

알람 애플리케이션은 인터넷이 연결되지 않아도 동작하기에 데이터도 클라이언트에 있다고 알 수 있지만 정확한 것은 API문서를 읽어보면 명확하게 알 수 있습니다.

 

 

 

 

 

이런 구분은 정확한 사람에게 정확한 요청을 하기 위해서 중요합니다.

• client - "그 데이터는 로컬에 있다", "내부 DB에 저장하고 있다", "네이티브에서 가져왔다"
• server - "API로 가져왔다", "DB에 저장해두고 쓰자"