brunch

라이킷 12 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 썸머글로리 May 22. 2023

씹고 뜯고 맛보고 즐기고...?

랜딩페이지

1. 마치 건축학도처럼

2. 랜딩페이지란 무엇인가

3. 랜딩페이지를 선정해보자

4. 랜딩페이지를 뜯어보자

5. 서비스 유형별 장단점 분석 및 확장 아이디어 구상

6. 링글에 적용시켜 본다면? (확장 아이디어 구상)

7. 오픈 API란 무엇인가

8. 오픈 API를 뜯어보자

1. 마치 건축학도처럼

동생은 모대학에서 건축학과를 다닌다. 뜬금없이 이 이야기를 하는 이유는 맨날 설계실에서 산다는 동생이 어쩌다 한번 집에 들어와서도 과제가 산더미라며 자기 몸통만한 설계도를 가지고 와서 미친듯이(거의 울면서) 구조물을 만드는 모습이 이번주 내 일하는 모습과 겹쳐보였기 때문이다.

출처: https://www.timbersafety.com/4425652789-4778551312441485262947932-4944444228.html

생각해보면 웹페이지의 구조를 뜯어본다는 건 꼭 건축물의 구조를 보는 것과 닮았다는 생각이 든다. 눈에 익지 않은 것들이 어지럽고 이런 것을 매일 보는 설계자들이 존경스러워 보인다는 생각이 샘솟게 하니까.

게다가 알고 있는 언어라곤 파이썬 밖에 없는 개알못(개발알못) 에게 이번 과제는 조금 곤혹스럽기 까지 했다. 물론 진짜 개발자친구가 봤다면 "엥? 이건 개발 축에도 속하지 않아" 라고 할 것이 뻔하지만(그래서 난 내 브런치주소를 인스타에 올리지 않는다.... 혹시 볼까 무섭다... ㅋㅋㅋ), 어쩌겠는가 몰랐던 지식은 처음 배울 때 가장 어렵다.

물론 회사 다니면서 심심할 때마다 F12 개발자 도구를 눌러서 이건 뭘까 하며 여기 있는 글자 하나를 고치면 뭐가 달라지나? 라는 생각을 하긴 했지만 거기까지 였을 뿐.

할일이 산더미인 요즘 같은 때에 새로운걸 하나 더 배우라는 건 마치 양손에 다 먹은 접시가 산더미처럼 쌓였는데 접시 몇개를 더 얹어주는 꼴밖에 되지 않기에 되도록이면 더 일을 만들고 싶지 않았다.

하지만 일을 만들고 싶지 않다는 것은 내 바램일 뿐, 때려박는 것보다 흐름 파악이 먼저 되어야 머리속에 내용이 잘 들어오고, 보면 뭔지 아는데 용어는 기억을 잘 못하는 나라는 사람은 과제 1번의 랜딩페이지라는 용어에서 부터 막혔고 그것이 무엇을 뜻하는가 부터 찾아보고 정리해야 했다.

그래도 덕분에 머리속에 부유하는 지식들을 잘 정리할 수 있었다. 역시 사람은 한번 써보고 정리해야 진짜 내 지식으로 들어오는 것 같다.

2. 랜딩페이지란 무엇인가

랜딩페이지란 전환이라는 하나의 목표를 가지고 만들어진 웹페이지를 의미한다.

CTA를 통해 이탈률을 최소화하고 전환율을 극대화하는 효과를 가지고 있는 것이 특징이며 이는 우리가 흔히 이야기하는 홈페이지와는 엄연히 다른 기능을 가지고 있다.

홈페이지는 유저가 다른 페이지로 방문하도록하여 유저의 체류시간을 증가시키는 목적으로 해당 브랜드가 제공하는 모든 서비스를 다 보여주는 것이다.

출처: 헤이딜러

위 이미지는 헤이딜러의 홈페이지다. 조그맣게 보이지만 페이지 상단에 보면 클릭할 수 있는 버튼들이 많이 보이는 것을 볼 수 있다. 이는 해당 브랜드에서 제공하는 모든 서비스를 볼 수 있게 한 것이다. 또한 어플이 주력인 브랜드이기 떄문에 아이폰 사용자들의 경우 앱스토어, 안드로이드 사용자들의 경우 구글 플레이스토어로 접근하여 앱을 다운로드 받을 수 있도록 유도하고 있다.

반대로 랜딩페이지는 유저의 특정 액션을 유도하는 마케팅 웹페이지다. 홈페이지보다 더 세분화되고 타겟층이 명확하며 한 가지 주제에 대한 설명으로 특정 목적을 가진 유저를 끌어오는 페이지를 구성하는 것이다.

랜딩페이지의 전략은 다음과 같이 정리할 수 있는데 첫번째 잠재고객 발굴 전략, 두번째는 참여전략이다.

첫번째 잠재고객 발굴 전략의 경우 잠재고객을 형성하기 위한 랜딩페이지를 제작하는 것이다. 이 랜딩페이지에 방문한 유저는 이메일 등 자신의 연락처를 제출해야 하는 양식이 마련되어 있다. 따라서 사용자의 메일을 통해 자세한 정보를 보내 잠재 고객을 발굴할 수 있다.

도서 '무기가 되는 스토리'의 저자 도널드 밀러가 ceo로 있는 스토리브랜드의 랜딩페이지(출처: 마이스토리브랜드닷컴)

웹페이지 뿐만 아니라 아래처럼 cta형식으로 페이지 하단에 띄워놓기도 한다.

자주가는 마케팅 사이트의 하단에 잠재고객 발굴을 목적으로 한 cta가 보인다. (출처: 오픈애즈)

두번째 참여전략 랜딩페이지는 내가 원하는 콜투액션(cta)에 유저가 참여할 수 있게 유도하는 전략이다. 따라서 참여전략 랜딩페이지는 유저가 클릭을 통해 구매하기, 둘러보기 등 내가 원하는 액션을 취할 수 있도록 해야한다.

애플 홈페이지에서도 유저의 참여를 유도하는 cta를 확인할 수 있었다.

출처: 애플 홈페이지

"매장 쇼핑 세션 예약하기 "를 누르면 내가 구매하고자 하는 기기의 종류를(애플워치/핸드폰/모니터/노트북 이런식으로) 선택하도록 하고, 예약한 시간에 지정한 매장에 방문하여 스페셜리스트의 도움을 받아 수많은 제품들 중에 내게 가장 잘 맞을 것 같은 제품을 추천받고 구매할 수 있도록 한 것이다.

3. 랜딩페이지를 선정해보자.

키보드 위에서 열심히 타자를 치다가 실수로 f12를 누른 경험이 다들 한번쯤은 있을 것이다. 나 역시 그렇게 개발자도구를 켜본 적이 많고 어쩌다 시간이 남을 때는 뭐하는 기능인가 싶어 유심히 쳐다봤던 적도 있지만 이것을 분석하고 뜯어보겠다는 마음은 들어본 적이 없다.

하지만 과제로 받은 일이니 한번 뜯어보고자 한다.

이번과제는 기존에 하던 분석주제와 무관하게 진행해도 된다고 했기에 분석용 랜딩페이지는 어떤 것으로 할까 고민하다가 가장 대중적인 토스로 하기로 했다. 관심있는 프로덕트여서라기보다 왠만한 랜딩페이지들보다 정리가 잘 되어있었기 때문이다.

랜딩페이지를 찾으면서 사실 아직도 많이 헷갈리는 부분이 앱기반 브랜드의 홈페이지에 들어가보면 안드로이드/ios설치하기 라는 부분이 보이는데 이 부분을 랜딩페이지라고 불러야 하는 건지 모르겠다. 홈페이지의 정의는 브랜드에 대해 모든 것을 담고 설명 위주로 되어있는 것이고 랜딩페이지는 고객이 많이 클릭하도록 유도하는 것으로 알고 있는데 보통 후자의 경우에는 인스타나 페이스북 같은 sns에서 유저들이 보고 많이 클릭하도록 하기 위한 것으로 만들어지지 않나?

내가 정리한 것이 맞다면, ios/안드로이드 설치하기 라고 되어있는 것은 홈페이지에 속하는 것일 뿐, 랜딩페이지라고 부르기엔 애매할 것 같다.

사실 유튜브나 블로그를 검색했을 때 랜딩페이지 만드는 법, 코딩을 몰라도 랜딩페이지 만드는 법 등은 나오지만 대표적인 랜딩페이지는 찾기가 어려웠다. 그러던 중 보통 랜딩페이지하면 게임 사전예약 페이지가 대표적이라는 한 영상의 댓글을 보고 게임 사전예약 페이지도 들어가 봤으나 막상 개발자도구로 들어가보면 html, css 등이 명확하게 나와있지 않는 경우가 많았다.

결국 랜딩페이지를 검색했을 때 예시로 많이 언급되던(많이 언급되는데는 이유가 있는 법ㅎ) 토스 랜딩페이지로 진행하기로 했다. 되도록이면 많이 안하는 프로덕트로 분석해보고 싶었는데 살짝 아쉬운 부분이다. 원래 많이 분석되고 많이 거론되는 브랜드를 또 분석하면 그만큼 위험이 따르기 마련이다...

초밥집이 많아지면 맛비교가 쉬운것 처럼....

사고접수를 위한 토스의 랜딩페이지(출처: 토스 사고접수 랜딩페이지)

4. 랜딩페이지를 뜯어보자.

일단 html,css,javascript가 어떤 구조를 가지고 있는지 파악해야 뜯어보는 것이 가능하다.

그래서 구글독스를 이용하여 정리해보았다.

HTML

문서로 정리해보았던 것

HTML(Hyper Text Mark-up Language) 은 문서의 뼈대를 만드는 것이다.

Hyper: linear(선형)의 반대말. linear는 프로그램을 순차적으로 실행했다면 hyper는 링크를 통해 실행순서가 자유로움

Text : 문자

Mark-up : 문서형식을 지정하는 명령문

Language : 언어

즉, 순차적이 아닌 자율적으로(hyper) 웹문서를(text)표시할 수 있도록 작성된 언어(mark-up language)를 말한다.

웹을 만들때는 html을 사용해야 하지만 우리가 웹사이트를 볼때는 html언어로 작성된 것을 브라우저가 번역해서 보여주는 구조이며 대표적인 브라우저로는 인터넷 익스플로러. 크롬, 사파리, 파이어폭스 등이 있다.

html언어 작성시 사용하는 프로그램으로는 Notepad, Pico, TextEdit 등이 있으며 기본코드형식은 아래와 같다.

[html 기본코드]
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>

시작시 <html>가 있고 끝 태그 </html>이 있는데 일반적으로는 태그가 이렇게 각각 쌍을 이루는 형태이다. 하지만 <br> 처럼 끝 태그가 없는 태그 (empty element)도 있다.

<html></html> html 문서의 시작과 끝

<title></title> 본문에 나오지 않지만 브라우저 툴바에 나타나는 제목

<body></body> 본문 영역. 이 안에 쓰는 내용은 모두 화면에 나옴

CSS

CSS는 문서의 화장을 맡고 있다.

글꼴, 배경색, 너비, 높이, 위치를 지정할 수 있으며 웹 브라우저, 스크린 크기, 장치에 따라 화면이 다르게 표시되도록 지정할 수도 있다.

css 스타일을 꾸미는 법은 세가지다.

1. 속성처럼 style 적용: html문서 안에 style속성을 사용하는 법(in-line)

<html>
<head>
<title>브런치 스토리</title>
</head>
<body>
<h1 style=”color:blue;text-align:center;”>
CSS 첫번째 속성</h1>
</body>
</html>

2. style 태그를 사용하는 법(internal)

<html>
<head>
<title>브런치 스토리</title>
<style type=”text/css”>
h1{
color;blue;
text-align:center;
}
</style>
</head>
<h1>CSS 두번째 속성</h1>
</body>
</html>

3. css파일을 별도로 만들어 html문서에 연결하는 법(External)

3-1. css 파일 생성: 텍스트 편집기를 사용하여 .css 확장자를 가진 새로운 파일을 생성한다. 이 파일은 css스타일 규칙을 포함한다.

3-2. css코드 작성: css파일을 열고 원하는 스타일 규칙을 작성한다. 예를 들어 다음과 같은 내용을 작성할 수 있다.

위 코드는 '<h1>'요소의 글자를 파란색으로, 글꼴 크기를 24픽셀로 지정하고, <p> 요소의 글자를 빨간색으로, 글꼴 크기를 16픽셀로 지정한다는 뜻이다.

3-3. HTML 문서에 CSS 파일 연결: HTML 문서의 <head> 요소 내에서 CSS 파일을 연결한다.

위의 코드에서 <link> 요소는 CSS 파일과 HTML 문서를 연결해준다.

rel 속성은 연결되는 파일의 관계를 나타내며, type 속성은 파일의 유형을 지정한다. href 속성은 CSS 파일의 경로를 지정한다.

3-4. HTML 문서에 CSS 스타일 적용: 이제 CSS 파일이 HTML 문서와 연결되었으므로, 실행을 눌러주면 CSS 파일에 작성한 스타일 규칙이 HTML 요소에 적용되는 것을 볼 수 있다.

'<h1>'요소인 "웹 페이지 제목"에 글자 색상 파란색, 글자 크기 24픽셀이 지정되어 있으며

'<p>'요소인 "웹 페이지의 내용을 설명하는 단락입니다" 에 글자 색상 빨간색, 글자 크기 16피셀이 적용되어 있는 것을 확인할 수 있다.

JavaScript

JavaScript는 웹 페이지를 동적으로 만들고 상호작용을 추가하는 프로그래밍 언어이다. HTML과 CSS와 함께 웹 개발에서 핵심적인 역할을 한다.

JavaScript는 아래 네가지 역할을 수행할 수 있다.

1. 웹 페이지 조작: JavaScript를 사용하여 HTML 요소를 선택하고, 스타일을 변경하거나 새로운 요소를 생성할 수 있다. 이를 통해 웹 페이지의 내용과 레이아웃을 동적으로 조작할 수 있다.

2. 이벤트 처리: JavaScript를 사용하여 사용자의 동작(클릭, 마우스 이동 등)에 반응하는 이벤트 핸들러를 작성할 수 있다. 예를 들어, 버튼 클릭 시 특정 동작이 실행되도록 할 수 있다.

3. 데이터 처리: JavaScript를 사용하여 사용자의 입력을 받고, 이를 처리하거나 서버와 통신하여 데이터를 가져오거나 보낼 수 있다. 데이터의 유효성 검사, 계산, 저장 등 다양한 데이터 처리 작업을 수행할 수 있다.

4. 애니메이션과 그래픽 처리: JavaScript를 사용하여 웹 페이지에 애니메이션 효과를 추가하거나, 그래픽 요소를 조작하거나 그리는 작업을 수행할 수 있다. 이를 통해 동적이고 시각적으로 풍부한 웹 경험을 제공할 수 있다.

앞서 정의된 세가지 내용-Html,CSS,JavaScript-를 토대로 간단한 샘플 웹페이지를 만들어보도록 하자.

1. 먼저 기존에 만들어놨던 html파일에 body부분만 살을 붙인다.

2. css파일에 버튼 백그라운드 색상과 글자 색상, 글자 크기를 추가한다.

3. html에 파일만 생성해둔 자바스크립트 파일을 클릭하여 세부 스크립트를 만든다. 해당 텍스트파일은 "나를 클릭하세요" 버튼을 눌렀을 때 팝업창이 뜨게하는 역할을 할 것이다.

버튼을 누르면 "버튼을 클릭했어요!" 라는 팝업창이 나오도록 만들었다.

마지막으로 다 만들어진 html을 실행 해보자.

웹페이지 실행시 화면이다.

웹페이지의 구조에 대해서 어느정도 확인했다.

위의 내용들을 바탕으로 개발자도구를 사용하여 토스 사고접수 랜딩페이지의 html, css, javascript 구조를 분석해보자.

뭐든지 잘 정리되어 있는 것은 보기가 좋다.

먼저 문서의 뼈대가 되는 html은 다음과 같다.

해당 코드는 HTML 문서의 일부이다.

div이라는 용어가 생소에서 찾아보니, HTML에서 사용되는 태그 중 하나로, "division"의 약자라고 한다.

해당 태그는 문서의 일부를 그룹화하거나 구획을 나누는 데 사용되는데 아무 의미를 가지지 않는 블록 수준 의 요소이며, CSS를 통해 스타일링하거나 JavaScript를 통해 동적인 동작을 추가하는 데 유용하다.

일반적으로는 다른 요소들을 묶거나 레이아웃을 구성하는 데 사용된다.

예를 들어, 위의 코드에서

<div class="section1-bg">는 클래스 이름이 "section1-bg"인 div 요소를 나타낸다. 이 div 요소는 섹션 1의 배경을 설정하는 데 사용된다.

보통 주로 레이아웃을 만들거나 콘텐츠를 그룹화하는 데 사용되지만, 의미적인 의미는 가지지 않기 때문에 특정 목적이나 스타일링을 위한 클래스 이름이나 추가 속성을 사용하여 식별한다.

각설하고 위의 문서는 아래와 같은 구성 요소들로 구성되어 있다고 볼 수 있다.

CSS 및 JavaScript 라이브러리:
1. aos.css: AOS(Aanimate On Scroll) 라이브러리를 위한 CSS 파일
2. reset.css: 초기 스타일을 재설정하는 CSS 파일
3. main.css: 메인 CSS 파일
4. jquery.min.js: jQuery 라이브러리
5. count.js: 특정 요소의 숫자를 애니메이션화하는 JavaScript 파일
6. aos.js: AOS(Aanimate On Scroll) 라이브러리를 위한 JavaScript 파일

웹 페이지의 구성 요소: 섹션(section) 요소로 구분된 여러 섹션들이 있음
각 섹션에는 해당 섹션을 구성하는 다양한 div 요소들과 이미지(img) 요소들이 포함되어 있음
텍스트(p)와 스팬(span) 요소들을 사용하여 텍스트 콘텐츠가 구성되어 있음

이미지 및 아이콘:
img 폴더에는 웹 페이지에서 사용되는 다양한 이미지 파일들이 저장되어 있음
icons 폴더에는 아이콘 이미지 파일들이 저장되어 있음

기타: meta 태그를 사용하여 문자 인코딩 및 뷰포트 설정을 지정하고 있음

CSS 및 JavaScript 라이브러리 3. 메인 css파일

html에 있는 "section","section1-gh","section1-bg2"와 같은 요소들을 메인 css파일에서는 각 요소마다 배경이미지, 배경색깔, 너비, 높이 등을 정의해주고 있는 것을 볼 수 있다.

javascript도 마찬가지로 html에 있는 script영역을 별도의 javascript파일에서 상세하게 정의해주는 것이다.

5. 서비스 유형별 장단점 분석

브랜드가 제공하는 프로덕트는 여러 서비스 유형으로 나타나 보여지며, 이러한 서비스 유형들은 네가지로 분류할 수 있다.

네이티브 앱 : 모바일 운영체제에 최적화된 언어를 사용해 개발한 앱이다. 안드로이드, ios에서 제공하는 sdk를 사용해 개발한다. 이러한 네이티브 앱의 형태로는 우리가 평상시에 보는 모든 휴대폰 어플들을 대상으로 할 수 있겠으나, 타 유형들과 차이를 두기 위해 서비스 사용을 하려면 무조건 앱을 다운받아야 진행이 가능한 브랜드 위주로 뽑아보았다.

대표적인 예시로는 토스/배달의 민족/카카오톡/헤이딜러 정도로 뽑아볼 수 있겠다. PC로 홈페이지를 들어

가면 앱을 다운받아야만 서비스 이용이 가능한 브랜드 들이다.

모바일 웹 : 모바일 기기에서 사용하기 편한 방식으로 개발된 '웹페이지'기반 서비스를 의미한다. 웹브라우저에서 작동한다. 한마디로 웹으로 시작한 회사가 아직 어플을 만들지 않았을 때 모바일로도 편하게 해당 기업의 웹사이트를 볼 수 있도록 만들어 놓은 경우이다.

대표적인 예시로는 핑크퐁/코드스테이츠/제로베이스 등이 있다.(사실 잘 생각이 나지 않아서 찾는데 애먹

었다.) 앱스토어/구글플레이스토어에서 검색했을 떄 나오지 않는 회사들의 경우 웹사이트에서 검색하면

모바일 웹형태로 되어 있는 것을 확인할 수 있다.

웹 앱 : 모바일 웹과는 반대로 앱의 형태를 지니고 있지만 실제구현은 웹사이트에서 이루어지는 것을 말한다. 대표적인 예로 시술/성형 비교어플인 강남언니가 있다.

출처: 강남언니 웹사이트

예전에는 이런 형식이 아니었는데, 최근 바뀐 형식이 훨씬 더 편하다. 이전에는 강남언니를 PC웹사이트로 검색 후 들어가더라도 경쟁업체로 거론되는 바비톡처럼 앱다운로드를 해야 서비스 이용이 가능하도록 되어있어서 비교적 타자를 많이 쳐야하는 커뮤니티를 이용할 떄는 불편하다고 느꼈었는데 그러한 부분을 개선하기 위해 웹 앱 형태로도 이용할 수 있도록 반영한 것 같다.

바비톡 웹사이트: 앱을 다운로드 해야 서비스 이용이 가능한 네이티브앱 위주의 형태를 띄고 있다.(출처: 바비톡 웹사이트)

하이브리드 앱 : 기본적으로 모바일에서 보기 편한 앱형식을 취하고 있으나 일부 기능의 경우 웹사이트로 넘어가는 형식을 말한다. 대표적인 예시로는 우리가 저번주까지 분석했던 링글이 있다.

링글 어플에서 고객센터를 누르면 인터넷 익스플로러로 연결되면서 링글의 고객센터 웹사이트로 나가는 것을 확인할 수 있다.

각 서비스 유형들의 장단점을 말해보자면, 다음과 같다.

6. 링글에 적용시켜 본다면? (확장 아이디어 구상)

랜딩페이지분석은 토스 사고접수 랜딩페이지로 해봤지만, 다양한 서비스 유형을 제공하는 프로덕트라 하면 8주동안 쭈욱 분석해온 링글이 빠지면 섭하다.

링글은 네이티브 앱, 모바일 웹을 함께 사용할 수 있는 하이브리드 앱으로 (아쉽게도 웹앱은 운영하지 않지만) 개발비용을 절감시키고 유지보수가 보다 용이하다는 하이브리드 앱의 장점을 가지고 있다.

하지만 원래 앱에서 출발한 기업이 아닌 웹에서 출발한 기업이기 때문에 네이티브 앱에 대한 개발 투자가 더 필요해 보인다. 멀티플랫폼 호환을 원할 경우 추가적인 개발이 더 필요하다는 네이티브 앱의 단점을 링글앱은 그대로 가지고 있으며, 유저 역시 앱리뷰 불만 건중 63%가 앱 안정성 관련 불만일 정도로 상당히 많은 불편함을 호소하는 중이다.

이들의 초기 서비스 유형은 HTML,CSS,JAVASCRIPT를 이용한 웹페이지로 시작되었다. 사실 링글을 이용해 본 유저로서, 링글서비스를 이용할 때는 웹이 앱보다 더 편한 것 같다는 생각이다.

수업할 때는 줌을 같이 이용하게 되는데 그뿐만 아니라 링글 홈페이지 상에서 튜터가 정리해주는 노트와 교재를 함께 보기 때문에 조그만 핸드폰 앱으로 하기에는 한계가 있다.

실제 수업 진행화면

실제로 링글 서비스를 튜터와 수업때문에 이용할 때는 출근전, 퇴근 후 집에서 이용하는 경우가 많기 때문에 앱으로 이용하는 경우는 많지 않을 것으로 보인다.

추가적으로 링글은 2030 여성들이 많이 사용하며, 사용자들 중 60%가 싱글가구이고 소득이 없는 이보다는 소득이 발생되는 사람들이 많이 이용한다.

2030여성의 비율이 압도적이다.

싱글가구가 63%이다.

이를 종합해 봤을 때 핸드폰에 설치되어 있는 링글앱을 접속하는 경우는 출퇴근 길, 점심시간 등이 많을 것으로 추정할 수 있으며 앱을 접속하는 목적은 예약되어있는 수업을 위한 예습 또는 복습, 영어 읽기 능력 향상을 위한 추가적인 학습 진행 일환의 교재 읽기 등일 가능성이 높다.

따라서 여기서 더 서비스 유형을 확장하기 보다는 현재 확장한 앱을 조금 더 유저가 보기 쉽도록 보강하고 멀티플랫폼 호환이 가능하도록 만드는 것이 필요해보인다.

7. 오픈 API란 무엇인가

Open API는 소프트웨어 애플리케이션끼리 상호 작용하기 위해 사용되는 인터페이스이다.

그럼 여기서 API는 뭘까?

쉽게 말해서 API는 두 개의 소프트웨어가 대화를 나누는 방법이다.

생각해보자. 우리가 음식점에 가서 주문을 할 때, 주문 내용을 작성하여 점원에게 전달한다. 그들은 주문을 받고 요리사에게 전달하며, 요리사는 주문된 음식을 조리한 후 다시 우리에게 제공해준다.

여기서 점원은 음식점의 "API"이다. 우리가 메뉴에서 선택한 주문 내용을 작성하여 API(점원)에게 전달한다. API는 주문을 받아 처리하고, 그 결과를 요리사(다른 소프트웨어)에게 전달한다. 요리사는 주문에 따라 음식을 조리하여 다시 API(점원)에게 전달하고, API는 그 결과를 다시 우리에게 전달한다.

즉 API는 소프트웨어 애플리케이션 간의 상호작용을 위한 일종의 매개체라고 생각할 수 있다. API를 사용하면 앱은 서로의 기능을 호출하고 데이터를 주고받을 수 있다. 이를 통해 다른 애플리케이션의 기능을 활용하거나 데이터를 공유할 수 있다.

api 앞에 Open이 붙으면 '제한 없이 엑세스 할 수 있다'는 뜻이 된다. Open API는 일종의 계약서와도 같은 역할을 하게 되며 서비스 제공자는 이를 통해 제공할 수 있는 기능, 데이터 포맷, 요청과 응답 형식 등을 정의한다. 이에 따라 외부 개발자는 API를 호출하여 서비스의 기능을 활용하고 결과를 받아올 수 있다.

예를 들자면 이런 거다.

우리는 링글에 로그인을 해야한다. 그런데 가입이 되어있지 않다. 오른쪽 상단 회원가입을 누른다.

여기서 대부분의 우리는 무엇을 누를까?

나라면 카카오로 5초만에 시작을 누를 것이다. 눈에 가장 잘 보이기도 하고, 복잡한 회원가입 절차를 카카오로 하면 빠르고 쉽게 할 수 있을 것 같기 때문이다. (5초만에 시작이라는데 당연하다.)

출처: 링글

하지만 링글은 날 도와주지 않았다. (허허)

원래 정상적으로 된다면, 아래와 같은 이미지를 볼 수 있다. 우리가 많이 보는 화면이다.

출처: kakao developer

이 과정을 "인가코드 발급과정"이라고 이야기한다.

아래 이미지는 카카오 open API를 사용한 카카오 로그인 과정을 나타낸 시퀀스 다이어그램(Sequence diagram)이다.

출처: kakao developer

8. 오픈 API를 뜯어보자

그렇다면 이제 오픈 api의 역할과 입출력 구조에 대해 이야기해보고자 한다.

앞에서 카카오를 이야기 했으니 이번에도 카카오로 이야기를 해보자. 마지막을 장식할 주인공은 카카오 지도 Open API이다. 해당 기능을 사용하면 개발자들은 카카오 지도를 자신의 애플리케이션에 통합할 수 있다.

출처: 여신티켓

위 앱은 피부과 관련 시술을 한눈에 보고 비교할 수 있는 여신티켓이라는 앱이다.

해당 어플에서는 카캬오 지도 open api를 활용하여 병원의 위치를 표시하고 있다. 즉 여기서 카카오 지도 open api의 역할은 아래와 같다.

1. 지도를 표시한다: 유저에게 알리고자 하는 위치의 정보와 지도기능을 제공하는 것이다.

2. 마커 및 오버레이 : 특정 위치에 마커를 추가하고 정보창을 표시한다. 이를 통해 특정 장소의 상세 정보를 제공하거나 사용자의 관심 지점을 표시할 수 있다.

다음은 입출력 구조이다.

"API의 입력"은

API를 호출할 때 전달하는 데이터 또는 매개변수를 의미한다. 이러한 입력은 API가 수행할 작업이나 동작을 지정하거나 필요한 정보를 전달하기 위해 사용된다. 입력은 API 호출 시 HTTP 요청의 매개변수, 헤더, 본문 등의 형태로 전달될 수 있다.

예를 들어, 주소 검색 API를 호출할 때 검색어를 입력으로 전달해야 한다. 이때 검색어는 API의 입력으로 사용되어 지정된 주소를 검색하고 결과를 반환받을 수 있도록 도와준다. 다른 예로는 사용자 인증 정보(API 키)를 입력으로 전달하여 API 호출의 권한을 확인하고 접근할 수 있도록 할 수 있다.

"API의 출력"은

API 호출에 대한 응답으로 반환되는 데이터나 결과를 의미한다. API는 입력에 따라 처리된 결과를 출력으로 반환하여 개발자에게 제공한다. 이 출력은 주로 HTTP 응답의 형태로 제공되며, XML, JSON, HTML 등의 형식을 사용할 수 있다.

개발자가 요청한 작업 또는 기능에 따라 다양한 형태의 데이터를 포함할 수 있는데, 예를 들어,주소 검색 API의 출력은 검색 결과로써 주소의 좌표, 상세 정보, 지도 위의 표시 등이 될 수 있다. 다른 예로는 사용자 인증 API의 출력은 인증 성공 여부와 관련된 메시지, 권한 정보 등이 될 수 있다.