'클라이언트'와 '서버'
일반적으로 IT 서비스는 클라이언트-서버 구조를 가지고 있다. 요청을 하는 쪽을 클라이언트, 요청에 맞춰 무엇인가를 제공하는 쪽을 서버라고 부른다. 클라이언트와 서버 모두 '프로그램'을 칭한다.
• 클라이언트: 가장 쉬운 예로는 앱이 있다. 우리는 쇼핑몰 앱을 키고, 상품을 클릭하고, 댓글을 남기는 등의 활동을 한다. 우리의 활동에 맞춰 클라이언트는 서버에 '홈 화면 불러와줘', '상품 페이지 열어줘', '댓글 표시해줘'라는 '요청'을 서버에 한다. 정리하면, '서버에 화면, 정보 등을 요청하고 응답을 받아 사용자에게 보여주는 역할'을 맡는다. 요청이 '시작'되는 곳이라고 하여 '프론트 엔드'라고도 부른다.
• 서버: 서버는 클라이언트의 요청에 응답하는 프로그램이다. 서비스를 제공하기 위한 정보를 가지고 있다가 클라이언트의 요청에 맞춰 제공한다. 홈 화면 정보를 갖고 있다가 요청이 들어오면 제공하고, 상품 페이지 정보를 갖고 있다가 또 제공하는 것이다. 요청을 '마지막'으로 처리하는 곳이라고 하여 '백 엔드'라고도 부른다.
운영 체제
컴퓨터에 프로그램을 설치할 때 '맥용', '윈도우용'이라고 뜨는 것을 본 적이 있을 것이다. 왜 같은 프로그램인데 맥용과 윈도우용으로 나뉠까? 운영 체제가 다르기 때문이다. 비유하자면 운영 체제는 모국어 같은 거다. 맥 나라는 Mac OS 언어를 쓰고, 마이크로소프트 나라는 윈도우 언어를 쓰는 것이다.
응용 프로그램(Application)
쉽게 말하면 컴퓨터에 까는 프로그램과 스마트폰에 다운받는 앱이다. 즉 운영 체제에서 실행되는 소프트웨어를 의미한다. 위에서 맥과 윈도우가 쓰는 언어(운영 체제)가 다르다고 했다. 때문에 개발자는 각 운영 체제에 맞는 개발 언어를 이용해 응용 프로그램을 개발해야 한다.
웹 브라우저
인터넷 익스플로러, 크롬, 사파리 등이 웹 브라우저다. 인터넷 콘텐츠를 조회할 수 있는 응용 프로그램이라고 정리할 수 있다. 표준으로 정해진 HTML이란 언어로 작성되어 있으면 운영 체제에 상관 없이 모든 브라우저에서 화면을 띄울 수 있다. HTML외에 웹 페이지 개발 언어로는 디자인을 입히는 'CSS', 동적인 효과(마우스나 스크롤 움직임에 반응)를 입히는 'JavaScript'가 있다.
네이티브 앱
응용 프로그램과 웹 브라우저의 개념이 이해되었다면, 이제 '네이티브 앱'과 '웹 앱'을 구분할 수 있다. 네이티브 앱은 스마트폰의 운영 체제에 맞춰 개발된 프로그램이다. 네이티브 앱을 개발하려면 각 운영 체제에서 사용하는 언어를 이용해 코딩을 해야 한다. 한마디로 '착붙'인 앱을 개발하는 거다.
• 단점: 이렇게 개발한 앱을 플레이 스토어나 앱 스토어에 올려 심사를 받고 통과해야만 앱이 등록되기 때문에(업데이트 할 때도 마찬가지) 다소 번거롭다.
• 장점: 카메라, 지문인식, 연락처 조회 등 스마트폰의 기본 기능들을 활용할 수 있고, 각 운영 체제에 최적화됐기 때문에 안정적으로 서비스를 제공할 수 있다.
웹 앱
퍼블리는 모바일 앱으로 이용할 수도 있지만, 웹 브라우저에서 'www.publy.co'에 접속해도 이용할 수 있다. 이렇게 주소만 있으면 모바일에서 웹 브라우저를 통해 이용할 수 있는 게 웹 앱이다.
• 단점: 네이티브 앱과는 달리 카메라 등 스마트폰의 기본 기능을 활용할 수 없다. 하지만 최근에는 웹 기술이 발전해 앱 처럼 사용할 수 있는 기능이 많아졌다. 카메라 접근이나 오프라인 작업 등도 가능하게 된 것이다.
• 장점: 다운로드 없이도 이용 가능하고, 웹 페이지라 언제든 쉽게 수정할 수 있다. '홈 화면에 바로가기 추가'를 하면 마치 앱을 깐 것 처럼 홈 화면에 앱 아이콘을 추가할 수도 있다.
하이브리드 앱
네이티브 앱과 웹 앱이 섞인 형태다. 네이티브 앱의 안정성과 웹 앱의 편리한 수정・관리라는 장점을 모두 갖고 있다. 일반적으로 앱의 기본 틀은 네이티브 앱으로 만들되, 특정 영역은 브라우저를 띄워 화면을 보여준다.
• 네이티브 앱 영역: 수정할 때마다 심사를 받아야 하고, 사용자가 앱 업데이트를 해야만 수정 사항이 적용되기 때문에, 자주 바뀌지 않는 영역을 네이티브 영역으로 개발한다.
• 웹 앱 영역: HTML 코드만 수정하면 모든 사용자에게 수정된 페이지를 보여줄 수 있다. 그래서 자주 바꿔야 하는 페이지를 웹 영역으로 개발한다.
하이브리드 앱은 좋아 보이는 만큼 안드로이드 개발자, iOS 개발자, 웹 개발자까지 필요하기 때문에 내부 리소스와 비용 등이 많이 든다.
웹 서버-웹 어플리케이션 서버-데이터베이스(DB)
서버가 요청을 처리하는 3단계다. 1) 클라이언트의 요청 사항을 해석 2) 필요한 데이터와 해야 하는 일을 체크 3) 데이터가 저장된 곳에 접근해 필요한 데이터를 찾아온다.
• 웹 서버: 클라이언트의 요청을 가장 먼저 받는 곳. 요청이 다음 단계로 넘어갈 수 있도록 번역하고, 반대로 요청을 완료해 클라이언트에 제공할 때도 클라이언트 언어에 맞춰 번역해 제공한다.
• 웹 어플리케이션 서버: 웹 서버가 번역한 내용에 맞춰 요청을 처리하기 위한 프로그램을 돌린다. 데이터베이스에서 데이터를 받아 요청을 처리하고 웹 서버에 제공한다.
• 데이터베이스: 서버에 저장된 데이터의 모음. 웹 어플리케이션 서버로 활용하는 컴퓨터의 저장 공간을 활용할 수도 있고, 처리 성능과 보안 유지를 위해 별도로 분리하기도 한다.
CRUD
데이터를 처리하는 방식으로, 생성하기(Create), 읽기(Read), 수정하기(Update), 삭제하기(Delete)의 앞 글자를 딴 말이다. 데이터는 무조건 이 네 가지 방법으로 처리된다. 어떤 경우에 어떤 데이터를 생성・읽기・수정・삭제할 것인지 구체적으로 기획해야 한다.
이를 바탕으로 백 엔드 개발자는 데이터베이스 구조를 설계하고 데이터를 처리하기 위한 로직을 개발한다. 그래서 사용자가 회원가입이나 주문 등을 하면 조건에 따라 클라이언트는 서버에 데이터를 생성・읽기・수정・삭제하기를 요청하고, 서버는 요청에 맞춰 데이터를 처리한다.
관계형 데이터베이스(Relational Database, RDB)
쇼핑몰의 관계형 데이터베이스를 가정해 보자. 모든 회원에게 숫자를 부여하고(마치 대학교 학번처럼), 상품에도 고유한 상품 번호를 부여한다. 이 숫자를 이용해 '누가' '무엇을' 샀는지 표시할 수 있게 된다. 이때 '숫자'를 'Key'라고 한다.
정리하면 Key라는 고유 식별자를 부여해 데이터를 보관하고, Key를 활용해 데이터를 연결하여 보관하는 방식을 말한다. 관계형 데이터베이스를 활용하면 가볍게 데이터를 저장하고, 빠르게 데이터를 불러올 수 있다.
'캐시'와 '쿠키'
데이터는 주로 서버 DB에 저장하지만, 경우에 따라 클라이언트 쪽에 저장하기도 한다. 종종 들어본 '캐시', '쿠키' 등이 여기에 해당한다. 인터넷이 끊겨도 유지되어야 하는 정보거나, 사용자 편의를 위해 유지되어야 하는 설정일 때 클라이언트 쪽에 저장한다.
• 캐시: 브라우저에* 데이터를 복사해 놓는 임시 장소를 의미한다. 브라우저를 종료하면 데이터도 같이 사라진다. 일반적으로 오디오나 이미지 파일을 미리 복사해 트래픽을 줄이고 로딩을 빠르게 하는 데 쓰인다. 같은 페이지를 두 번째 방문했을 때 그 전보다 빠르게 로딩되는 경우가 바로 캐시에 파일이 저장 되었기 때문이다.
* 캐시는 클라이언트 스토리지에 저장돼 있을 수도 있고, 서버나 CPU 등에 있을 수도 있다. 여기에선 이해하기 쉽게 웹 브라우저의 캐시로 설명했다.
• 쿠키: 특정 서버에서 브라우저에 저장한 특정 데이터를 의미한다. 캐시와 다른 점은, 쿠키는 만료기한을 정할 수 있어 브라우저가 꺼져도 만료기한 전에는 데이터가 사라지지 않는다. 주로 사용자의 인증 정보 또는 변경된 옵션값을 저장하는데 사용된다. 예를 들면 자동 로그인, '오늘 하루 그만 보기' 팝업 설정 저장에 활용된다.
앱의 '클라이언트 스토리지'
스마트폰의 앱도 서버 DB가 아닌 클라이언트 쪽에 데이터를 저장하는 경우가 있다. 앱을 다운받으면 스마트폰 저장 공간에 앱 폴더가 생성되며 실행을 위한 파일들이 설치된다. 앱은 이 공간을 활용해 자동 로그인을 위한 인증 정보, 장바구니 정보 등을 저장한다.
카카오톡을 사용할 수록 앱 용량이 커지는 이유가 각종 대화 내역, 파일 등이 일정 기간 동안 이 공간에 저장되기 때문이다. 클라이언트 스토리지를 활용하면 서버의 부하를 낮추거나 사용자의 경험을 더 좋게 만들 수 있다.
API
'애플리케이션 프로그래밍 인터페이스(Application Programing Interface)'의 약자. 프로그램과 프로그램이 서로 데이터를 주고 받기 위해 사전에 정한 요청・응답 방식을 말한다. 프로그램끼리 서로 일하는 방법을 약속한 거라고 보면 된다.
예컨대 '클라이언트에서 서버에 회원 가입을 요청할 때는 이름, 아이디, 비밀번호, 핸드폰 번호를 기입해야 한다. 그럼 서버가 회원 정보에 저장하고 로그인 완료 페이지를 전달하겠다.' 같은 약속이다.
'에러 코드'와 '성공 코드'
프로그램끼리 주고 받는 언어라고 할 수 있다. 대표적으로 웹에서 사용하는 'http'에서는 숫자 3자리로 표현한다. 개발자들은 이 코드를 보고 요청을 잘 처리했는지 아니면 문제가 발생했는지를 체크한다. 첫 번째 자리 숫자에 따라 결과의 종류를 구분할 수 있다.
• 5xx: 서버에서 요청을 처리할 수 없음을 알리는 경고. 서버에 오류가 생겼거나 서버에서 응답이 너무 늦는 경우에 나타난다. 이 코드가 나오면 빠르게 서버 개발자에게 코드와 함께 상황을 알려야 한다.
• 4xx: 클라이언트의 요청이 잘못됨을 알리는 경고. 마지막 두 자리 숫자에 따라 클라이언트의 요청 중 어디가 잘못되었는지 알 수 있다. 우리에게 익숙한 404 에러는 클라이언트가 서버에 존재하지 않는 페이지를 요청하거나, 이미 삭제된 페이지를 요청하는 경우 나타난다.
이 외에 100~300번대 코드는 성공 코드로, 서버가 요청을 잘 처리 했을 때 남긴다.
클라우드 컴퓨팅
컴퓨터를 쓰려면 여러 가지가 필요하다. 소프트웨어, 운영체제, CPU, 메모리 등등. 이걸 우리 집에 다 설치하지 않고, 인터넷을 통해 다른 곳에 있는 컴퓨터에 접속하는 것을 클라우드 컴퓨팅이라고 한다. 개발자들은 주로 서버를 구축할 때 클라우드 컴퓨팅을 활용한다.
클라우드 컴퓨팅을 제공하는 대표적인 업체로는 AWS(Amazon Web Service)가 있다. AWS에서 필요한 기능을 고르고 이용 기간에 따라 비용을 내면 IT 자원을 원격으로 이용할 수 있다. 사용하는 디스크 스토리지나 응용 프로그램 등을 내가 관리하지 않아도 돼 편리하고, 사용할 때만 돈을 내면 되니 비용도 줄일 수 있다.
백 오피스
백 오피스와 백 엔드를 많이들 헷갈려 하지만, 이 둘은 다른 개념이다. 백 오피스는 관리자가 상품 정보나 결제 내역 등을 관리하는 페이지를 의미한다. 백 오피스도 사용자(회사 직원들)가 있는 하나의 프로그램, 즉 클라이언트다. 서버를 의미하는 백 엔드와는 다르다. 서비스 복잡도에 따라 여려 개의 백오피스를 두기도 한다.
반응형 디자인
다양한 화면 사이즈에 맞춰 화면의 레이아웃이 반응하는 웹 디자인을 의미한다. 반응형 디자인이 적용된 페이지는 하나의 url 주소를 가지지만, PC, 태블릿, 스마트폰 등 화면 사이즈가 각기 다른 디바이스로 보았을 때 페이지의 레이아웃이 각 사이즈에 맞춰 변한다.
퍼블리싱
디자이너는 웹 페이지를 이미지 형태로 디자인한다. 이게 웹 브라우저 화면에서 보여지려면 HTML이나 CSS, Javascript 코딩 언어를 활용해 웹 페이지화 해야 한다. 이를 퍼블리싱이라고 한다. 퍼블리싱은 프론트 엔드 개발의 일부이고, 웹 퍼블리싱에 특화된 개발자를 '퍼블리셔'라고 부른다.