백엔드, 클라이언트, API
안녕하세요, 오늘은 제목 그대로 코드 한 줄도 못쓰는 개발 관련 지식이 전혀 없이 일을 시작하게 된 기획자들의 용어 공부 편입니다.
물론 디자인이나 데이터/컴퓨터 엔지니어링을 전공한 기획자들도 많지만, 아닌 분들도 많고,
저희 셋 모두 전공자들이 아니었기 때문에 더더욱 눈물을 가득 머금고 공부를 하게 된 것 같습니다.
저희의 공부일지가 다른 기획자 분들에게도 도움이 되기를 바라며 일단 ‘자주 듣는 개발 용어 편’을 준비해보았습니다.
*경고: 저희도 전문가가 아닌 공부를 하고 있기 때문에 저희가 적는 글이 최대한 정확하도록 늘 열심히 검증 과정을 거치지만, 혹시나 틀린 정보가 있다면 독자 분들께서 너그러운 마음으로 양해 부탁드리며 꼭 댓글 부탁드립니다.
사용자의 눈에 보이는 웹서비스는 간단히 프로필창, 검색창 등과 같은 웹페이지의 겉모습을 결정하는 요소들과 웹페이지의 내용을 이루는 데이터로 이루어져 있습니다.
아래 네이버 홈페이지를 예로 들면, 네이버를 대표하는 ‘초록창’은 프론트엔드(FE)에서 구현합니다.
검색어를 입력받을 수 있는 창으로 만들고, 돋보기 버튼을 눌렀을 때 사용자가 입력된 검색어와 관련된 페이지로 이동하게 해줍니다.
만약 어느 날 갑자기, 저 초록창에 아무런 텍스트를 입력할 수 없게 되었다고 상상해봅시다. 네이버 내의 어떤 개발자가 해당 문제를 해결할 수 있을까요?
높은 확률로 FE 개발자가 해당 창에 텍스트를 인풋할 수 있도록 다시 코드를 수정해줘야 할 것입니다.
이와 같이 FE의 영역은 사용자가 보는 화면의 모양과 동작을 개발하는 것입니다.
반면, 같은 아래 화면에서 ‘NAVER 로그인’ 버튼을 통해 ID, 비밀번호를 입력했는데 ‘수지’라는 제 이름 대신 ‘윤아’이라는 이름이 뜬다고 상상해봅시다. (내 이름은 수지가 아닌데~,, 너무 옛날 노래인가요ㅎㅎ)
이 경우에는 ‘수지’, ‘윤아’라는 사용자의 ID, 이름이 저장된 회원 정보 관련 데이터베이스에 어떠한 문제가 있을텐데요, 사용자가 입력한 정보를 처리하고, 저장하는 일은 백엔드(BE) 개발자가 담당하고 있습니다.
BE는 서비스 내에서 데이터가 저장되어 있는 저장소에 해당 저장소의 구조를 만들고, 정상적으로 데이터가 저장될 수 있도록 데이터베이스 관련 처리나 API를 개발하는 역할을 맡고 있습니다.
그렇다면 다음 용어인 API는 무엇일까요?
API는 Application Programming Interface의 약자입니다.
풀어 쓴 이름을 봐도 사실 뜻을 이해하기 힘든데요. API는 서로 다른 소프트웨어나 시스템이 서로 '대화'할 수 있도록 도와주는 중간자와 같습니다. 네이버 웹사이트에서 날씨 정보를 얻을 때의 상황을 예시로 들어보겠습니다.
과연 네이버는 어떻게 날씨 정보를 알고 있는걸까요? 설마 네이버가 직접 모든 지역의 날씨 정보를 관측해서 실시간으로 보여주는 것일까요?
답은 NO! 네이버는 날씨 정보를 직접 관측하지 않습니다. 대신, 날씨 정보를 전문으로 제공하는 서비스에게 날씨 정보를 요청합니다. 이때, 해당 서비스가 제공하는 API를 사용하여 요청을 전달합니다.
네이버 : 날씨 서비스야, N월 N일의 성수동 날씨를 알려줘 (API를 통해 이 요청을 전송)
날씨 서비스 : N월 N일의 성수동 날씨는 6.2도, 맑음 (실제로는 특정한 파일 형식으로 요청에 대해 응답함)
여기서 요청하는 네이버는 '클라이언트(앱)', 날씨 서비스의 API는 '중간자', 그리고 날씨 데이터를 보유한 서버가 '서버'에 해당합니다. 앱은 API를 통해 날씨 데이터를 요청하고, API는 그 요청을 서버에 전달하여 필요한 정보를 받아 앱에 제공합니다. 대신, API에는 정해진 형식과 주소가 있어서 클라이언트는 그에 맞게 요청해야합니다.
사실 더 쉽게 생각하면, 우리가 검색 엔진에 무언가를 검색하여 정보를 얻는 과정과 크게 다르지 않습니다.
네이버가 API를 사용해 날씨정보를 얻는 모습과 우리가 네이버에서 성수동 맛집을 검색하는 과정을 비교해보겠습니다.
이번 편에서는 대략적인 이해를 돕기 위해 조금은 추상적인 방법으로 설명드렸는데요,
다음 심화편에는 실제로 API 요청과 응답이 어떻게 이루어지는 예시를 보여드리겠습니다.