‘클라이언트’와 ‘서버’ (Client & Server)
일반적으로 IT 서비스는 클라이언트-서버 구조를 따릅니다. 클라이언트는 요청을 하는 쪽이며, 서버는 요청에 대한 응답을 제공하는 쪽입니다. 이 두 개체는 모두 ‘프로그램’으로 지칭됩니다.
• 클라이언트: 예를 들어, 앱이 대표적입니다. 쇼핑몰 앱을 실행하고 상품을 선택하며 댓글을 작성하는 등의 활동을 수행합니다. 사용자의 활동에 따라 클라이언트는 서버에게 ‘홈 화면을 가져와줘’, ‘상품 페이지를 열어줘’, ‘댓글을 표시해줘’와 같은 ‘요청’을 전송합니다. 간단히 말해, 클라이언트는 ‘서버에게 정보를 요청하고 응답을 받아 사용자에게 보여주는 역할’을 합니다. 이는 ‘프론트 엔드’로도 불립니다.
• 서버: 서버는 클라이언트의 요청에 응답하는 프로그램입니다. 서비스를 제공하기 위한 정보를 보유하고, 클라이언트의 요청에 맞춰 이 정보를 제공합니다. 예를 들어, 홈 화면 정보를 보유하고 있어 클라이언트 요청 시 제공하거나, 상품 페이지 정보를 가지고 있어 요청에 따라 제공합니다. 이는 ‘백 엔드’로도 불립니다.
운영 체제(OS:Operation System)
프로그램을 설치할 때 ‘맥용’, ‘윈도우용’과 같은 용어를 본 적이 있을 것입니다. 이는 운영 체제가 다르기 때문입니다. 비유하면, 운영 체제는 각자의 모국어와 같습니다. 맥은 Mac OS 언어를 사용하며, 마이크로소프트는 윈도우 언어를 사용합니다.
응용 프로그램(Application)
간단하게 말하면, 컴퓨터에 설치하거나 스마트폰에 다운로드할 수 있는 프로그램입니다. 이는 운영 체제에서 실행되는 소프트웨어를 나타냅니다. 앞서 언급한 맥과 윈도우의 언어(운영 체제)가 다르기 때문에, 개발자는 각 운영 체제에 맞는 언어를 사용하여 응용 프로그램을 개발해야 합니다.
웹 브라우저(Web Browser)
웹 브라우저는 인터넷 익스플로러, 크롬, 사파리 등이 포함됩니다. 이는 인터넷 콘텐츠를 조회할 수 있는 응용 프로그램으로 정의됩니다. HTML이라는 표준 언어로 작성되어 있으면 운영 체제에 관계 없이 모든 브라우저에서 화면을 표시할 수 있습니다. 이 외에도 ‘CSS’는 디자인을 입히는 데, ‘JavaScript’는 동적인 효과를 추가하는 데 사용됩니다.
네이티브 앱(Native App)
응용 프로그램과 웹 브라우저의 차이를 이해했다면, 이제 ‘네이티브 앱’과 ‘웹 앱’을 구분할 수 있습니다. 네이티브 앱은 스마트폰의 운영 체제에 특화된 프로그램으로, 각 운영 체제에서 사용하는 언어로 개발해야 합니다. 이는 간단히 말해, 스마트폰에 ‘달라붙어 있는’ 앱을 개발하는 것입니다.
• 단점: 앱을 플레이 스토어나 앱 스토어에 등록하려면(또는 업데이트하려면) 심사를 통과해야 하므로 번거로울 수 있습니다.
• 장점: 스마트폰의 기본 기능(카메라, 지문인식 등)을 활용할 수 있고, 각 운영 체제에 최적화되어 안정적으로 서비스를 제공할 수 있습니다.
웹 앱 (WebApp)
퍼블리는 모바일 앱으로 사용 가능하지만, ‘www.publy.co’에 웹 브라우저를 통해 접속해도 이용할 수 있습니다. 이는 주소만 있으면 모바일에서 웹 브라우저를 통해 사용 가능한 ‘웹 앱’의 특징입니다.
• 단점: 네이티브 앱과는 달리 스마트폰의 기본 기능(카메라 등)을 활용할 수 없습니다. 그러나 최근에는 웹 기술이 발전하여 앱과 유사한 기능을 제공할 수 있게 되었습니다. 카메라 접근이나 오프라인 작업도 가능해졌습니다.
• 장점: 다운로드 없이 사용 가능하며, 웹 페이지로 언제든지 쉽게 수정할 수 있습니다. ‘홈 화면에 바로가기 추가’를 통해 앱 아이콘을 홈 화면에 추가할 수도 있습니다.
웹 서버-웹
어플리케이션 서버-데이터베이스(DB)
서버가 요청을 처리하는 과정을 3단계로 나눌 수 있습니다. 1) 클라이언트의 요청을 해석, 2) 필요한 데이터와 수행해야 할 작업을 확인, 3) 데이터가 저장된 위치에서 필요한 데이터를 검색합니다.
• 웹 서버: 클라이언트의 요청을 가장 먼저 수신하는 곳으로, 요청을 해석하고 클라이언트 언어에 맞게 번역하여 다음 단계로 전달합니다.
• 웹 어플리케이션 서버: 웹 서버가 번역한 내용에 따라 요청을 처리하는 프로그램을 실행합니다. 데이터베이스에서 데이터를 가져와 요청을 처리하고, 그 결과를 웹 서버에 전달합니다.
• 데이터베이스: 서버에 저장된 데이터 모음입니다. 웹 어플리케이션 서버와 함께 사용되는 컴퓨터의 저장 공간으로 활용되거나, 성능과 보안을 위해 별도로 분리될 수 있습니다.
CRUD
데이터 처리 방식으로, ‘생성(Create)’, ‘읽기(Read)’, ‘수정(Update)’, ‘삭제(Delete)’의 앞 글자를 따온 말입니다. 데이터는 반드시 이 네 가지 방법으로 처리됩니다. 어떤 데이터를 어떻게 생성, 읽기, 수정, 삭제할 것인지 구체적으로 계획해야 합니다.
이를 기반으로 백 엔드 개발자는 데이터베이스 구조를 설계하고 해당 데이터를 처리하는 로직을 개발합니다. 따라서 사용자가 회원가입이나 주문과 같은 작업을 수행하면, 클라이언트는 서버에 데이터 처리 요청을 보내고, 서버는 이에 따라 데이터를 처리합니다.
관계형 데이터베이스(Relational Database, RDB)
쇼핑몰의 관계형 데이터베이스를 가정해 보겠습니다. 각 회원과 상품에 고유한 숫자를 할당하고(학번처럼), 이를 사용하여 ‘누가’ ‘무엇을’ 샀는지 추적할 수 있게 됩니다. 이때 ‘숫자’는 ‘키(Key)’로 불립니다.
간단히 정리하면, 각 데이터에 고유 식별자를 부여하고, 이를 활용하여 데이터를 연결하여 저장하는 방식을 의미합니다. 관계형 데이터베이스를 사용하면 데이터를 가볍게 저장하고, 빠르게 검색할 수 있습니다.
‘캐시’와 ‘쿠키’ (‘Cache’, ‘Cookie’)
데이터는 주로 서버 DB에 저장되지만, 경우에 따라 클라이언트 측에도 저장됩니다. 여기에는 종종 들어본 ‘캐시’, ‘쿠키’ 등이 해당됩니다. 인터넷 연결이 끊겨도 유지되어야 하는 정보나 사용자 편의를 위해 설정을 유지해야 할 때 클라이언트 측에 저장됩니다.
• 캐시: 브라우저에 데이터를 일시적으로 저장하는 임시 공간을 의미합니다. 브라우저를 종료하면 데이터도 함께 사라지며, 주로 오디오나 이미지 파일과 같은 자원을 미리 복사하여 트래픽을 줄이고 로딩을 빠르게 하는 데 사용됩니다. 같은 페이지를 두 번째 방문했을 때 더 빠르게 로딩되는 경우가 캐시에 파일이 저장되어 있기 때문입니다.
* 캐시는 클라이언트 스토리지에 저장될 수도 있고, 서버나 CPU에 저장될 수도 있습니다. 여기에서는 웹 브라우저의 캐시로 설명했습니다.
• 쿠키: 특정 서버에서 브라우저에 저장한 데이터를 나타냅니다. 캐시와 다른 점은, 쿠키는 만료 기한을 정할 수 있어 브라우저를 닫아도 만료 기한이 지나지 않은 한 데이터가 유지됩니다. 주로 사용자의 인증 정보나 변경된 옵션값을 저장하는 데 사용되며, 자동 로그인이나 ‘오늘 하루 그만 보기’ 팝업 설정과 같은 용도로 활용됩니다.
앱의 ‘로컬 저장소’, ‘클라이언트 스토리지(Client Storage)’
스마트폰 애플리케이션은 종종 서버 데이터베이스가 아닌 사용자 기기에 데이터를 저장하는데, 앱을 설치하면 스마트폰 저장 공간에 해당 앱 폴더가 자동으로 생성되고 실행에 필요한 파일들이 설치됩니다. 이 공간을 활용하여 앱은 자동 로그인 정보, 장바구니 세부 정보 등을 저장합니다.
카카오톡 사용량이 증가함에 따라 앱 크기가 증가하는 이유는 대화 기록, 파일 등이 일정 기간 동안 로컬 저장소에 보관되기 때문입니다. 로컬 저장소를 활용하면 서버 부하를 줄이거나 사용자 경험을 개선할 수 있습니다.
웹 API
‘웹 API (Application Programming Interface)’는 프로그램 간에 데이터를 교환하기 위해 사전에 정의된 요청 및 응답 방식을 나타냅니다. 이는 프로그램들이 서로 상호 작용하는 방법에 대한 약속으로 이해할 수 있습니다.
예를 들어, ‘클라이언트에서 서버에 회원 가입을 요청할 때, 이름, 아이디, 비밀번호, 핸드폰 번호를 기입해야 합니다. 그러면 서버가 회원 정보를 저장하고 로그인 완료 페이지를 전달할 것입니다.’와 같은 약속이 있습니다.
‘오류 코드’와 ‘성공 코드’
프로그램 간의 커뮤니케이션을 위한 언어로 볼 수 있습니다. 웹에서 주로 사용되는 ‘HTTP’에서는 숫자 3자리로 오류 또는 성공을 나타냅니다. 개발자들은 이 코드를 확인하여 요청이 성공적으로 처리되었는지 또는 문제가 발생했는지를 판단합니다. 첫 번째 자리의 숫자에 따라 결과의 종류를 구분할 수 있습니다.
• 5xx: 서버에서 요청을 처리할 수 없음을 나타내는 경고. 서버에 오류가 발생하거나 서버에서 응답이 지연되는 경우에 나타납니다. 이 코드가 나타나면 빠르게 서버 개발자에게 코드와 상황을 알려야 합니다.
• 4xx: 클라이언트의 잘못된 요청을 나타내는 경고. 마지막 두 자리 숫자에 따라 클라이언트의 어느 부분에서 오류가 발생했는지를 알 수 있습니다. 404 오류는 클라이언트가 서버에 없는 페이지를 요청하거나 이미 삭제된 페이지를 요청하는 경우에 나타납니다.
이외에 100~300번대 코드는 성공 코드로, 서버가 요청을 성공적으로 처리한 경우에 사용됩니다.
클라우드 컴퓨팅 (Cloud Computing)
컴퓨터를 사용하기 위해서는 여러 구성 요소가 필요합니다. 소프트웨어, 운영 체제, CPU, 메모리 등이 그 예입니다. 이러한 구성 요소를 집에 직접 설치하지 않고, 인터넷을 통해 원격으로 접속하여 다른 장소의 컴퓨터를 사용하는 것을 클라우드 컴퓨팅이라고 합니다. 개발자들은 주로 서버를 설정할 때 클라우드 컴퓨팅을 활용합니다.
AWS (Amazon Web Service)는 클라우드 컴퓨팅을 제공하는 주요 회사 중 하나입니다. 필요한 기능을 선택하고 이용 기간에 따라 비용을 지불하면 IT 자원을 원격으로 사용할 수 있습니다. 디스크 스토리지나 응용 프로그램과 같은 자원을 직접 관리하지 않아도 되어 편리하며, 사용하는 동안에만 비용을 지불하므로 비용을 절감할 수 있습니다.
백 오피스(Back-Office)
백 오피스와 백 엔드는 종종 혼동되지만, 이 둘은 다른 개념입니다. 백 오피스는 관리자가 상품 정보나 결제 내역 등을 관리하는 페이지를 나타내며, 이는 사용자(회사 직원)가 사용하는 클라이언트 프로그램입니다. 이는 서버를 나타내는 백 엔드와는 구분됩니다. 서비스 복잡성에 따라 여러 백 오피스가 동작할 수 있습니다.
반응형 디자인 (Responsive Design)
화면의 레이아웃이 다양한 크기에 맞게 자동으로 조정되는 웹 디자인을 의미합니다. 반응형 디자인이 적용된 페이지는 하나의 URL을 가지고 있지만, PC, 태블릿, 스마트폰 등 다양한 디바이스에서 페이지 레이아웃이 해당 디바이스에 맞게 변합니다.
퍼블리싱 (Publishing)
디자이너는 웹 페이지를 이미지 형태로 디자인하고, 이를 웹 브라우저 화면에서 보이게 하려면 HTML, CSS, Javascript와 같은 코딩 언어를 사용하여 웹 페이지로 변환해야 합니다. 이 작업을 퍼블리싱이라고 하며, 프론트 엔드 개발의 한 부분으로 웹 퍼블리싱에 특화된 개발자를 ‘퍼블리셔’라고 부릅니다.