brunch

라이킷 10 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 배정민 May 22. 2023

HTML, CSS, JavaScript

모바일 앱 서비스 형태, Open API 응용

1. html 문서

1-1 html 문서의 태그 구조

1-2 웹 문서 구조

1-3 html 문서의 기본구조

1-4 html의 구성 요소

1-5 랜딩페이지 html 구조 사례

1-5-1 <head>태그

1-5-2 <body>태그

2. CSS

2-1 CSS란

2-2 CSS 구조

2-3 CSS 구체적 예시

2-4 CSS 기본 문법

3. Java Script

3-1 JavaScript란?

3-2 랜딩페이지 구조 분석

4. 모바일 앱 서비스 종류

4-1 네이티브 앱

4-1-1 카카오뱅크 모바일 앱 서비스 개발 사례

4-1-2 네이티브 앱 장점

4-1-3 네이티브 앱 단점

4-2 웹 앱

4-2-1 웹앱 장점

4-2-2 웹앱 단점

4-3 모바일 웹

4-3-1 모바일 웹 장점

4-3-2 모바일 웹 단점

4-4 하이브리드 앱

4-4-1 하이브리드 앱 장점

4-4-2 하이브리드 앱 단점

5. API

5-1 API란, API 활용 확대 배경

5-2 공공 API를 활용한 호갱노노

5-3 기업Open API 활용한 핀블리

5-4 Open API 응용

5-4-1 트위터 (Twitter) 계정으로 인증 받기

5-4-1-1 웹 분석 응용(Open API)

5-4-2 네이버 Open API

5-4-2-1 웹 분석 응용(Open API)

HTML 문서 비전공자 시각에서 파헤쳐 보기

HTML, CSS, JS 란 무엇❓

HTML(Hyper Text Markup Language) : 구조(기획자) 웹페이지를 만드는 컴퓨터 언어이다.

페이지의 제목, 문단, 표, 이미지 등 웹의 구조를 담당한다.

웹페이지를 만들면 정보를 public하게 공유할 수 있다는 점이 유용하며 이러한 웹페이지를 만들기 위한 언어로서 HTML은 필요하다.

CSS(Cascading Style Sheets) : 스타일(디자이너)

웹페이지에 시각적 표현(디자인)을 입히는 언어이다. 실제 화면에 표시되는 방법(색상, 폰트 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당한다

JS(JavaScript) : 동적처리(개발자)

콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적처리를 담당

1. HTML 문서

1-1) HTML 문서의 태그 구조

1-2) 웹 문서 구조 (HTML 문서 구조)

<head> 와 <body> 영억으로 구분되며 제목(머리부)과 본문(몸체부)에 해당되는 부분으로 분리되어 진다.

웹브라우저는 HTML 문서를 읽으면서 텍스트 주위에 있는 모든 태그들을 해석해서 해당 태그에 맞는 정보를 제목, 문단, 이미지 등에 적용하여 표시해 준다.

머리부

<head> 태그 영역

문서의 형태, 타이틀 정보, 스타일 정보, 자바스크립트에 대한 정보가 들어가는 부분

웹브라우저가 알아야 할 중요한 정보들이 들어가는 곳

몸체부

<body> 태그 영역

정보 전달을 위한 데이터가 들어가는 부분

화면에 직접 출력되는 부분

1-3) HTML 문서의 기본 구조

MTML 문서의 시작은 <html> 태그로 시작하고 </html> 태그로 끝난다.

HTML 문서의 내부는 <head></head> 태그와 <body></body> 태그로 이루어져 있다.

<html>: html 문서의 최상위 요소로, 모든 html 요소를 포함한다.

<head>: 문서의 메타 데이터, 스타일시트, 스크립트 등의 정보를 포함하는 부분이다.

<title>: 웹페이지의 제목을 정의합니다. 브라우저의 탭에 표시되는 텍스트이다.

최적화 등을 지정할 수 있다.

</heda>

<body>: 실제 콘텐츠가 표시되는 부분으로, 웹사이트의 주요 내용이 포함된다.

이 영역 안에는 다양한 태그들을 넣을 수 있으며 배치할 수 있다.

그렇게 배치되는 것이 바로 웹 페이지가 구조화 되는 것이다.

</body>

<header>: 웹사이트의 헤더 영역을 정의한다. 로고, 메뉴, 제목 등이 포함될 수 있다.

</html>

1-4) HTML의 구성 요소

1. 요소(Elements)

HTML에서 시작태그와 종료태그로 이루어진 모든 명령어들

태그명령어 종류들

element는 태그(tag)와 내용(contents)으로 구성되어 있다. tag는 contents에 효과를 주는 역할이며, 종류에는 링크 태그, p태그, 이미지 태그 등이 있다.

tag를 작성할 때는 반드시, contents 시작부분에 여는 태그<???>를 쓰고 끝 부분에 닫는 태그 </???>를 써야한다. 그러므로 element의 구조는 항상 <태그>콘텐츠</태그> 이다.

2. 태그(Tag)

요소의 하나로서 시작태그 와 종료태그로 이루어져 있다.

<p>Hello World</p>

3. 속성(Attributes)

조금 더 구체화된 명령어

요소의 시작태그안에 사용되어 진다

다양한 효과를 부여한다

4. 값(Arguments)

속성과 관련된 값을 의미

1-5) 랜딩페이지 html 구조 사례

배틀그라운드 메인 랜딩페이지의 주요 html 태그를 확인 해보자

1-5-1)

<head> 태그

예시1)

배틀그라운드 메인 랜딩페이지

1. <script> 태그

2. <meta> 태그

문서의 문자 인코딩을 UTF-8로 설정되어 있는것을 확인할 수 있다. UTF-8은 다양한 언어와 문자를 지원하는 인코딩 방식으로, 대부분의 경우 권장되는 인코딩 방식이다.

<meta name="description" _ 'description' 은 웹사이트에 대한 간단한 설명을 제공한다.
<meta name="keywords" _ 'keywords' 는 웹사이트와 관련된 키워드를 지정한다.
<meta name="author" _ 'author 는 웹사이트의 작성자를 지정한다.
<meta property="og:title" _ 'og:title' 은 공유시 제목,
<meta property="og:description" _ 'og:description' 은 공유시 설명,
<meta property="og:image" _ 'og:image' 는 공유시 함께 표시 될 이미지를 지정한다.

3. <link> 태그

여기서는 favicon.ico라는 파비콘 파일을 HTML 문서와 연결한다. 파비콘은 웹사이트를 대표하는 작은 아이콘으로, 브라우저의 탭이나 북마크 목록에 표시된다.

1-5-2)

<body>태그

예시2)

배틀그라운드 메인 랜딩페이지

1. <div>태그

<div> 태그는 HTML 문서에서 구획을 나타내는 일반적인 컨테이너 태그이다.

<div> 태그는 아무런 의미를 갖지 않고, 단순히 다른 요소들을 그룹화하는 역할을 수행한다. 주로 스타일링을 위해 사용되며, CSS를 통해 <div> 요소의 스타일을 지정하고 레이아웃을 구성하는 데 활용된다.

<div> 태그는 다른 HTML 요소를 감싸거나 그룹화할 때 사용되며, 다양한 형태의 콘텐츠를 포함할 수 있다. 아래 예시에서 <div> 태그는 <h1> 태그, <p> 태그, <ul> 태그 등의 다양한 콘텐츠를 감싸고 있다. 이를 통해 이들 요소들을 하나의 그룹으로 묶어 스타일링하거나 레이아웃을 구성할 수 있다.

<div> 태그는 유연한 구조를 제공하여 웹페이지의 요소들을 조직화하고 그룹화할 수 있다. CSS와 함께 사용하면 <div> 요소를 스타일링하고 웹페이지의 레이아웃을 구성하는 데 유용하게 활용할 수 있다.

2. <input> 태그

<input> 태그는 사용자로부터 정보를 입력받을 수 있는 입력 필드를 생성하는 데 사용된다. 다양한 형태의 입력 필드를 생성할 수 있으며, 사용자가 텍스트, 숫자, 날짜, 체크박스 등을 입력하도록 할 수 있다.

(1) 텍스트 입력 필드

위 예시는 사용자가 텍스트를 입력할 수 있는 텍스트 필드를 생성한다.

type="text" 속성은 입력 필드의 타입을 지정하고, name 속성은 필드의 이름을 지정한다.

placeholder 속성은 입력 필드에 미리 힌트를 제공하는 텍스트를 지정한다.

(2) 비밀번호 입력 필드

위 예시는 비밀번호를 입력받는 필드를 생성한다.

type="password" 속성은 입력된 텍스트를 가려주는 비밀번호 형식으로 필드를 생성한다.

(3) 숫자 입력 필드

위 예시는 숫자를 입력받는 필드를 생성한다.

type="number" 속성은 숫자 입력을 제한하며, min과 max 속성을 통해 입력 가능한 숫자의 범위를 지정할 수 있다.

(4) 체크박스

위 예시는 사용자가 동의 여부를 선택할 수 있는 체크박스를 생성한다.

type="checkbox" 속성은 체크박스를 생성하고, name 속성은 필드의 이름을 지정한다. 체크박스와 연결된 레이블을 생성하기 위해 <label> 태그와 for 속성을 함께 사용한다.

3. <noscript> 태그

4. <style> 태그

위의 코드는 <h1> 태그를 선택하는 선택자인 h1을 작성하고, color 속성을 사용하여 텍스트 색상을 빨간색으로 지정한다.

2. CSS

2-1) CSS란 :

CSS는 Cascading Style Sheets(CSS 스타일 시트)의 머리글자를 딴 것이다.

캐스케이팅 스타일 시트는 HTML 태그(요소) 등에 어떤 장식을 할지, 그 장식은 어떤 크기, 어떤 색깔, 어떤 폰트(글꼴의 경우)인지를 지정하는 언어이다.

쉽게 표현하면 HTML에 '디자인을 입혀주는' 언어라고 할 수 있다.

구체적으로 '문자 색상 바꾸기', '링크를 버튼으로 보이기' 등이 가능하다.

2-2) CSS 구조

CSS는 HTML 요소들의 크기 조절, 디자인, 배치 등 디자인을 가공한다.

HTML 요소란 '상자 BOX'라 부르는, HTML 태그로 둘러싸인 장소 영역이다.

HTML을 작성하면 위의 그림과 같이 '상자'가 만들어 진다. 이 상자를 둘러싼 CSS에 디자인을 주면, 여백을 추가하거나 위치를 바꿀 수 있다. (상자는 눈에 보이지 않는다)

2-3) CSS 구체적 예시

1. 문자 크기 바꾸기

HTML에서 <h1>등 제목 만드는 태그를 사용하면, 그 부분의 문자 크기가 달라진다.

이와는 별도로, CSS를 이용해 지정된 위치의 문자 크기를 바꿀 수도 있다.

2. 색상 바꾸기

HTML에서 문자 색상을 바꿀 수 있지만, 현재는 CSS에서 문자 색상을 바꾸는 것이 일반적이다.

또한, 이전에는 배경색에 그라데이션을 적용을 위해 이미지를 사용했으나, CSS를 이용하면 배경 색상에 그라데이션 적용하는 작업이 훨씬 수월해졌다.

3. 여백 만들기

간단히 CSS를 활용해 HTML 요소(상자)에 여백을 지정할수 있다. 위 소스는 CSS(마진 및 패딩 등)를 설명하는 것으로, 상자에 여백을 지정하는 방법이다.

2-4) CSS 기본 문법

기본 문법에 따라 CSS를 작성하여, 어디에 어떤 장식을 할 것인지를 지정할 수 있다.

예시3)

배틀그라운드 메인 랜딩페이지

3. JavaScript

3-1) JavaScript란?

JavaScript는 웹을 위한 인터프리터 언어이자 객체기반의 스크립트 프로그래밍 언어이며 HTML의 특정 요소(들)을 선택하여 다양한 이벤트 (마우스 클릭, 키보드 입력 등)에 따라 어떤 동작을 하도록 기능을 넣을 수 있으며 발생하는 이벤트에 따라 HTML, CSS를 조작할 수도 있고 그 외에도 여러가지를 할 수 있다.

예시4)

배틀그라운드 메인 랜딩페이지

3-2) 랜딩페이지 구조 분석

!function(f,b,e,v,n,t,s)

{if(f.fbq)return;n=f.fbq=function(){n.callMethod?

n.callMethod.apply(n,arguments):n.queue.push(arguments)};

if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';

n.queue=[];t=b.createElement(e);t.async=!0;

t.src=v;s=b.getElementsByTagName(e)[0];

s.parentNode.insertBefore(t,s)}(window, document,'script',

'https://connect.facebook.net/en_US/fbevents.js');

fbq('init', '1707822742636640');

fbq('track', 'PageView');

</script>

위의 코드는 <script> 태그를 사용하여 JavaScript 코드를 삽입하고 있다. 이 코드는 변수 선언과requirejs.config() 함수 호출을 포함하고 있다.

변수 선언: kgMemberCertUrl: "https:\/\/t1.kakaocdn.net\/gamepub\/js\/member\/cert\/kg.member.cert.js"로 초기화되는 변수이다. host: "https:\/\/pubg.game.daum.net"로 초기화되는 변수이다.

requirejs.config() 함수 호출: 이 함수는 RequireJS를 설정하고 모듈 로드를 관리하는데 사용된다. baseUrl: host + '/res/js/'로 설정되어, 모듈의 기본 경로를 https://pubg.game.daum.net/res/js/로 지정한다. urlArgs: "ts=" + "20221108"로 설정되어, 모듈의 URL에 타임스탬프 매개변수를 추가한다. paths: 모듈의 경로를 설정한다.

jquery는 https://t1.kakaocdn.net/gamepub/js/lib/jquery/1.12.4/jquery.min.js로 설정되어 있고, youtube는 //www.youtube.com/iframe_api?noext로 설정되어 있다.

4. 모바일 앱 서비스 종류

모바일 애플리케이션 종류 및 구분 (출처: UX스토리)

일반 사용자는 똑같은 애플리케이션으로 받아들이겠지만 개발 방법이나 실행 방법에 따라 애플리케이션 종류 네 가지로 구분할 수 있습니다.
네이티브 앱(NATIVE APP), 모바일 웹(MOBILE WEB), 모바일 웹앱(MOBILE WEB APP), 하이브리드 앱(HYBRID APP) 네 가지입니다.

4-1) 네이티브 앱(NATIVE APP)

첫 번째 애플리케이션 종류 중에 안드로이드 SDK를 이용해 Java로 개발하거나, iOS SDK를 이용해 Object C 언어로 개발하여 모바일 기기에 최적화된 앱을 네이티브 앱이라고 합니다. 기기의 고유 정보에 직접 접근이 가능하여 아이디어 구현이 거의 가능한 앱입니다. 마켓에 등록 및 판매가 가능하고, 다운 설치가 가능합니다.

4-1-1) 카카오뱅크 모바일 앱 서비스 개발 사례

카카오뱅크 앱 개발 초기 개발방향의 주요 의사결정 사항들

참조: 카카오뱅크 모바일 개발 파트 박이랑님의 개발자 콘퍼런스 'if kakao 2018'

카카오뱅크는 하이브리드 앱 대신 네이티브 앱을 개발을 선택하였습니다. 당시 네이티브 앱의 기존 개발사례가 없어 과연 어떠한 문제에 부딪혔을때 빠르게 대응할 수 있을까에 대한 두려움을 느꼈다고 합니다. 또한 안드로이드와 iOS, 각각의 특성을 고려해 그에 맞는 네이티브 앱을 따로 개발했기 때문에 형태가 틀어지지 않게 맞춰서 동기화하는 작업 등에서 많은 시행착오를 겪었다고 합니다.

왜 카카오뱅크는 하이브리드 앱으로 만들지않고 네이티브 앱으로 만들었을까?

하이브리드 앱에는 극복하지 못하는 몇가지 단점들이 있었다고 합니다. 네이티브 앱보다 현저히 뒤처지는 속도, 안드로이드 및 iOS 이두가지 플랫폼의 사용자 경험(UX)을 만족시킬 수 없다는 점, 그리고 하이브리드 앱이 가지고 있는 히든 코스트(hidden cost)가 그 단점들입니다. 그 중에서 하이블리드 앱의 히든 코스트로 1개의 코드 베이스에서 2개의 앱을 운영하는 것이 어렵다는 점, 최신 OS 대응 및 신규 기능을 대응하기 어렵다는 점, 그리고 웹 개발자와 앱 개발자의 협업 비용을 예로 들었습니다.

반면에 네이티브 앱이 가지고 있는 단점으로는 버그 또는 UI수정에 앱 업데이트가 필요하다는 점과 두가지 플랫폼을 각각 개발해야 한다늕점, 그리고 시간과 개발인력이 더 많이 필요하다는 점이 있었지만, 이 세가지 단점들은 충분히 개선 가능하고 오히려 장기적으로 비용이 절감되는 효과를 주는 최적의 툴을 제공해 주기에 긍정적으로 받아들였다고 합니다. 이것이 카카오뱅크가 네이티브 앱으로 개발하기로 결정한 배경이 되었습니다. 또한 카카오뱅크는 은행 고객들이 원하는 건 거창한게 아닐수도 있다는 생각에 빠른 성능과 좋은 사용자 경험(UX)에 중점을 두는 등 고객의 입장에서 고민하여 앱을 개발하였습니다.

하이브리앱이 아닌 네이티브 앱으로 결정하게 된 배경

카카오뱅크 네이트비 앱 개발 결정 과정

4-1-2) 네이티브 앱(Native APP)의 장점

각 운영체제에 최적화된 방식으로 만들어지므로 앱의 구동 속도가 빠르고 안정적이다.

높은 사양의 그래픽으로 원하는 디자인을 구현할 수 있다. (비주얼이 화려한 게임은 대부분 네이티브 방식으로 앱 개발이 이루어짐)

디바이스 전체에 접근 권한을 가질 수 있기 때문에 기기 자체의 기능을 앱에 활용할 수 있다.

4-1-3) 네이티브 앱(Native APP)의 단점

다른 운영체제에서 호환이 되지 않기 때문에 안드로이드와 iOS 앱을 별도로 개발해야 한다.

다른 앱 개발 방식에 비해 제작하는 데에 비용과 시간이 많이 든다.

앱에 수정사항이 생기는 경우 앱 마켓의 심사를 거치고 전체 업데이트를 진행해야 한다.

4-2) 웹 앱(Wed APP)

네이티브 앱처럼 보이고, 기능 또한 앱과 동일하게 구현되지만, 웹 기술을 활용하여 만들어진 앱을 ‘웹 앱(Wed APP)’이라고 합니다. 네이티브 앱과 달리 웹 앱은 웹 기반의 HTML, CSS, Javascript 등을 활용하며, 별도의 앱 파일을 설치하지 않고 인터넷 브라우저를 기반으로 작동됩니다.

앱 없이 인터넷을 통해 구동되는 것을 보면 일반 모바일 웹과 똑같은 것이라 느낄 수 있지만, 두 가지는 약간의 차이점이 있습니다. 모바일 웹의 경우 PC를 기준으로 제작된 뒤 모바일 화면 규격에 맞게 폰트나 이미지 등을 바꾼 것이지만, 웹 앱은 처음부터 모바일을 기준으로 제작되기 때문에 스마트폰 이용자에게 훨씬 편안한 환경을 제공합니다. 하지만 모바일에 설치하는 앱이 아니므로 카메라나 음성 등 디바이스의 자체 기능에 접근은 할 수 없습니다.

4-2-1) 웹 앱(Web APP)의 장점

인터넷 브라우저를 기반으로 작동하기 때문에 별도의 앱을 설치하지 않아도 된다.

표준 웹 언어로 만들 수 있기 때문에 상대적으로 제작 비용이 저렴하고 개발 기간도 짧은 편이다.

수정사항이 생겨도 앱 마켓의 심사를 거치치 않아도 되기 때문에 업데이트 속도가 빠르다.

4-2-2) 웹 앱(Web APP)의 단점

디바이스에 접근 권한이 없기 때문에 카메라나 음성 인식 등의 기능을 활용할 수 없다.

앱 설치 대신 브라우저 실행 및 url 입력이나 별도의 링크 클릭 등의 과정을 거쳐야 해서 번거롭다.

네이티브 앱에 비해 상대적으로 구동 속도가 느리고 안정성도 떨어진다.

4-3) 모바일 웹(MOBILE WEB)

PC에서 보는 웹을 모바일에서 보기 때문에 그에 맞는 사이즈로 변경한 웹사이트입니다. ‘모바일 홈페이지’라고도 합니다.안드로이드나 iOS 등 OS에 상관없이 제작이 가능하나 페이지를 호출할 때마다 서버에서 정보를 다운로드해야 하는 “풀브라우징” 방식이어서 로딩 속도가 늦고, 모바일 특성상 이동을 해야 하는데 서버 접속 장애가 발생될 수 있어서 상당히 불안정한 앱이라고 할 수 있습니다.

홈페이지(웹사이트)를 만드는 HTML, CSS, Javascript, PHP, .NET 등의 일반적인 웹 기술로 개발됩니다.

4-3-1) 모바일 웹(Web) 장점:

개발 시간, 비용이 가장 적다. Android, iOS 두가지를 동시 개발 가능하다.

HTML,CSS,JS등 웹 개발 언어만 알아도 충분히 개발 가능하다

4-3-2) 모바일 웹(Web) 단점:

사용자가 검색, URL 입력 등을 통해 들어와야 하므로, depsth가 깊다.

모바일 기기 접근이 불가능해, 스마트폰 OS에서 제공하는 기능을 활용할 수 없다. (카메라, 마이크, 푸쉬 알람 등)

속도가 느리고, 퍼포먼스가 좋지 않다

4-4) 하이브리드 앱(HYBRID APP)

모바일 웹과 웹앱의 단점을 보완한 것이 하이브리드 앱입니다.
외부형태는 네이티브 앱이라서 기기 고유의 정보를 읽고 변경할 수 있으며, 하드웨어(카메라, 센서)를 제어할 수 있고, 앱스토어나 안드로이드 마켓에 등록해서 판매가 가능합니다.
브라우저 실행, 첫 페이지 로딩 지연, 모바일 고유 정보에 접근의 어려움 등 모바일 웹앱의 단점을 보완하였지만 네이티브 앱과 비교하면 성능 면에서는 많이 떨어집니다.

‘하이브리드 앱(Hybrid APP)’은 네이티브 앱과 웹 앱의 개발 방식을 모두 사용합니다. 앱의 화면이나 기능 등 콘텐츠 영역은 웹 기반으로 제작하고 겉모습은 앱 마켓 등록과 설치를 위해 네이티브 앱으로 포장한 것이죠. 두 가지 개발 방식을 이용하므로 웹과 앱의 API를 모두 사용할 수 있습니다. 따라서 웹 앱에서는 불가능 했던 디바이스 자체 기능에 접근할 수 있습니다.

이렇듯 하이브리드 앱은 웹과 앱 개발의 장점을 모두 가지고 있습니다. 하지만 패키징에 모바일 운영체제 별 네이티브 개발 언어를 활용해야 하기 때문에 각 기술에 대한 전문지식이 있어야 하고, 앱의 콘텐츠가 웹에서 실행되기 때문에 브라우저 성능에 따라 속도가 떨어질 수 있다는 문제점도 있습니다.

4-4-1) 하이브리드 앱(Hybrid APP)의 장점

웹 기술을 기반으로 제작되지만, 모바일 API도 사용할 수 있으므로 디바이스의 자체 기능을 활용할 수 있다.

네이티브 앱에 비해 개발 비용 및 시간을 절약할 수 있다.

한 번 개발해두면 패키징을 바꾸는 방식으로 여러 플랫폼에 대응할 수 있다.

4-4-2) 하이브리드 앱(Hybrid APP)의 단점

네이티브 앱 개발 지식이 필요하다.

브라우저의 성능이 떨어지면 앱 구동 속도가 저하된다.

네이티브 앱에 비해 디자인의 자유도가 떨어진다.

어떤 형태의 앱으로 개발해야 할까?

앱의 퍼포먼스, 디바이스 접근 기능이 중요하며, 충분한 리소스, 능력 있는 개발자가 있다면? 네이티브 앱

1) 기능, 디자인, 사용성이 중요한 경우: 게임 앱, 지도 앱(카카오맵, 네이버 지도), 교통 앱, 카메라 앱

2) 업데이트가 드문 경우: 멤버쉽 앱(스타벅스, T멤버쉽)

리소스(시간,비용)가 지극히 제한적이며, 업데이트가 잦은 제품이라면? 모바일 웹, 웹앱

일부 디바이스 접근 기능이 필요하고, 쉬운 유지, 보수, 업데이트를 위해서는? 하이브리드 앱

1) 콘텐츠가 지속적으로 업데이트 되는 경우: 포털 앱(네이버, 다음, 구글), 쇼핑 앱(11번가, 쿠팡, 지그재그)

2) 보안이 중요한 경우: 은행 앱, 카드 앱

5. API

5-1) API란, API 활용 확대 배경
API: Application Programming Interface

API는 서버와 클라이언트가 서로 정보를 어떻게 주고받을지에 대해 미리 정의한 규칙으로 통신할 때 기반이 되는 역할을 한다.

API는 응용 프로그램을 사용할 수 있도록 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 비(非) 그래픽 인터페이스입니다. 단순하게 설명하자면, 서로 분리된 시스템 간의 커뮤니케이션 방법이라고 할 수 있는데요. 2000년 초부터 웹 기반으로 사용됐습니다.

Web 2.0을 통한 빠른 소프트웨어 확산의 개념은, 모바일 서비스의 발달과 클라우드, MSA등의 구조적 변화와 함께 Open API를 활용한 매시업(mash-up) 서비스로 실현됐습니다. 이번 글에서는 공공 API를 활용하는 사례부터, 기존 API의 특징을 무료로 활용하면서 새로운 가치를 만드는 사례까지 함께 알아보겠습니다.

오픈소스 생태계와 API를 통한 정보 공유 기술에 대한 고민을 통해 Open API 문화가 발달했습니다. 그리고 2010년대에 들어서며 스마트폰이 등장하고 각 OS별 앱스토어가 활성화되면서 성장을 거듭하게 됐죠. 스마트폰에 설치된 SDK 기반의 네이티브 앱 클라이언트와 서버가 서로 분리되면서 구조적으로 API 활용이 늘어났는데요. 개인 개발자들이 소프트웨어를 만들고 유통할 수 있는 앱스토어 생태계가 생겨나면서 2000년대 초반부터 웹 기반의 Open API를 활용한 수많은 앱이 탄생했습니다.

2010년대 후반부터는 점점 클라우드로 인프라가 옮겨지면서 비용에 구애받지 않고 MSA(MicroService Architecture)를 채택할 수 있게 됐습니다. 이를 통해 서비스 간 영향도를 줄이며 더 빠른 서비스 확장과 개선이 가능해졌죠. 또한 MSA를 통해서 DB와 서버까지 모두 분리가 되면 각각 개선해도 영향을 주지 않고 속도가 빨라지기에, 자연스레 private API의 사용이 늘어나게 됐습니다.

소프트웨어 업계에서 API가 지금처럼 많이 활용되는 이유는 아래와 같이 요약할 수 있습니다.

첫째, 모바일 앱과 IaaS(Infrastructure as a Service)를 기반으로 MSA가 활성화되면서 하나의 서비스가 해체되고 Private API를 사용해 조립하는 구조가 됐습니다. 그리고 이런 연결고리에서 타사에서 제공하는 다양한 API와 연결할 수 있는 접점도 늘어났습니다.

둘째, 앱스토어를 통한 소프트웨어 유통 플랫폼이 생겨나고, Web 2.0이 확산되면서 공유된 Open API를 기반으로 빠르게 소프트웨어를 만들어내는 것에 익숙해졌습니다.

매시업이란 2가지 이상의 대상을 융합해 새로운 것을 만드는 것을 의미하는데요. 여러 회사에서 제공하는 Open API를 활용해 제공받은 정보를 바탕으로 자사의 서비스를 추가해 기존과 다른 그래픽 사용자 인터페이스(GUI)를 만드는 서비스를 매시업 서비스라고 합니다. 즉, 이러한 매시업 서비스들은 ‘API 경제 가치 사슬’을 기반으로 생성되는 것이죠.

최근에는 국가기관부터 구글, 페이스북, 네이버, 카카오 등 대형 IT기업까지, Open API를 제공해주는 개발자 페이지를 가지고 있습니다. 이런 서비스들은 주로 무료로 접근 가능한 것으로 보이는데요. 그렇기 때문에 이것이 Web 2.0의 공유 문화에서 출발했다고 해도 기업에 어떠한 이득이 되는가에 대해서 궁금증을 가질 수 있습니다.

IBM에서 2016년에 발표한 <API Monetization-Understanding your Business Model Options> 리포트에서는 API를 통한 수익화의 종류를 여러 가지로 도식화해 소개하고 있습니다. 국내에서는 공공기관 데이터를 공유하는 데이터 포털에서 공공 API를 제공하는 경우, 별도의 비용을 받지 않는데요. 직접적으로 돈을 버는 방식인 ‘개발자 지불(developer pays)’방식과 ‘개발자 보상(Developer Gets paid)’ 방식도 존재합니다. 그리고 API를 통해서 간접적으로 이익을 발생시키는 경우도 있습니다.

5-2) 공공 API를 활용한 서비스 : 호갱노노

아파트 실거래가 조회 부동산 앱인 호갱노노는 2015년 초 이케아 가구의 가격 비교 사이트로 오픈했습니다. 각 나라에서 운영되는 이케아 사이트의 가격을 크롤링해 비교해주는 가격 비교 서비스로 시작한 것이죠. 그러다가 공공데이터를 분석해 ‘호갱노노 2탄’이라는 이름의 서비스를 출시했습니다. 포털에 보여주는 부동산 시세와 국토교통부의 실거래가에 많은 차이가 있다는 점에서 착안한 것이었는데요. 국토교통부의 실거래 정보를 가져와서 네이버가 Open API로 제공하는 네이버 지도 위에 보여주는 단순한 방식이었습니다.

네이버 지도는 Open API를 통해서 업데이트되는 지도 이미지 정보와 주소지별 위치의 여러 가지 정보를 공유합니다. 이 외에도 호갱노노는 20종 이상의 공공데이터를 엮어서 서비스를 만들고 있는데요. 국토부를 비롯해 행정안전부, 교육부 등이 제공하는 보육·학교 정보, 일조량 변화와 같은 데이터를 활용해 부동산에 대한 여러 가지 데이터를 모아서 편리하게 볼 수 있도록 제공합니다.

호갱노노는 스타트업의 매시업 서비스 창업의 전형을 보여줍니다. 일단 창업 당시 개발 인력은 단 한 명이었습니다. 대표와 디자이너 외에 한 명이 서비스의 기본 기틀을 만들었는데요. 이는 공공 데이터의 Open API를 통해서 데이터를 쉽게 모을 수 있었기에 가능했습니다.

호갱노노는 서비스 제공의 바탕이 되는 지도에 대해서는 사기업인 네이버에서 제공하는 API를 활용하고 있는데요. 네이버의 지도 API에서는 지속해서 업그레이드되는 지도와 상점에 대한 정보를 이미지 파일을 통해서 제공합니다. 호갱노노의 경우에도 그 바탕이 되는 지도와 위치 정보, 건물의 상호에 대해서는 네이버 지도 API에서 전달받는 정보를 그대로 사용하고 있습니다.

사기업의 API라고 해도 처음부터 큰 비용이 필요한 것은 아닙니다. 네이버의 이러한 지도 API 서비스는 수익구조로 보면 ‘Tiered’ 이자 방식에 따르고 있습니다. API 사용을 등록하고 자신의 사용량을 기준으로 상품을 선택하면 최대 호출할 수 있는 양이 나오는데요. 이보다 더 많은 건수를 사용해야 할 경우 별도의 영업팀과의 컨택을 통해서 사용료를 요구할 수 있습니다.

호갱노노의 경우, 2020년 기준으로 MAU(Monthly Active Users)가 400만 명을 넘었기 때문에 지금은 별도의 사용료를 내고 있을 것으로 예상됩니다. 하지만 앱을 처음 만든 초창기에는 서비스의 사용자가 어느 정도 높아질 때까지 공공 API처럼 무료 사용이 가능했을 것입니다.

사기업의 API 서비스를 처음에 무료로 사용할 수 있도록 하는 가장 큰 이유는 ‘의존도’에 있습니다. 해당 기능이 새로 만들어진 매시업 서비스의 핵심 기능으로 자리 잡게 될 경우, 의존도가 높아지는데요. 의존도가 높아지면 더 많은 트래픽이 필요해질 경우, 기존의 API를 사용하고 있던 기업에서 쉽사리 다른 대안으로 바꾸기 어려울 수 있습니다. 그때에는 네이버처럼 많은 트래픽과 이용에 대해서 합리적인 비용을 요구하기에 더 유리하게 되는 거죠.

이처럼 스타트업이 처음 시작할 때 빠르게 조합해 만드는 매시업의 형태는 실제 의미 있는 서비스인지 알아보는 시작 단계에서 개발구현의 속도를 높여줄 수 있습니다. 그뿐만 아니라 기존에 분산되어 있던 정보를 모아 새로운 가치를 전달해줄 수도 있습니다.

5-3) 기업 Open API를 활용한 서비스 : 핀플리

핀플리는 최근 앱스토어에서 멜론을 누르고 음악 다운로드 랭킹 1위를 기록한 국내 스타트업 Crecasse AI가 만든 무료 음악 재생 앱이자 음악 SNS 서비스입니다. 앱이 탄생한 지 2년 정도가 됐고, 국내 서비스를 시작한 지는 1년이 채 넘지 않았습니다. 이 앱은 일반적인 음악 앱들이 자체적인 음원 스트리밍 서비스를 가지고 있는 것과 다르게 스트리밍 자체를 유튜브의 영상 재생 API를 이용해서 만들고 있는데요. 노출하는 음악에 대한 정보도 대부분 유튜브의 동영상 정보를 API로 받아서 보여주는 형태로, API를 이용한 매시업 서비스 중의 하나입니다.

핀플리는 이 같은 조건을 해소하기 위해서 특별한 개발을 해야 했습니다. 플레이어가 나타나야 하므로 음원 재생 시 화면 하단에는 유튜브의 플레이어 영역이 최소 기준에 해당하는 200*200 px로 차지하고 있었는데요. 이 부분은 미적으로 크게 문제가 되지는 않았지만, 음원 재생 앱으로써의 조건을 맞추기 위해 ‘잠금모드’를 추가했습니다.

잠금 모드란, 화면을 어둡게 하고 터치를 잠가서 화면이 켜져 있지만 마치 꺼져 있을 때처럼 느끼도록 하는 상태를 말합니다. 다른 앱 위에서 작은 창으로 노출하는 PIP모드를 지원할 때에도 마찬가지로 ‘잠금모드’를 지원하고 있죠. 슬기로운 대처를 통해 유튜브 API의 특징을 무료로 활용하면서 새로운 가치를 만들어낸 것입니다.

API를 사용하는 입장에서는 반드시 유료로 제공하는 API를 사용해야 하는 것은 아닙니다. 편의를 위해 특수한 목적으로 제공되는 경우, 제한적인 서비스 안에서 여러 가지 대안을 통해서 문제를 해결할 수 있죠. 앞서 소개한 사례는 이런 과정을 통해 새로운 서비스를 창조해 낼 수 있다는 좋은 예시가 될 것입니다.

5-4) Open API 응용

5-4-1) 트위터 (Twitter) 계정으로 인증 받기

트위터 자료를 가져오려면 인증서를 다운로드 받아야 함

트위터 계정 만들기 https://twitter.com

트위터 API 등록 http://apps.twitter.com 새로운 twitter app 만들기(인증서 받기 위한 과정)

Name: 트위터 계정이름과 동일하게 작성

Description: 목적 등을 상세하게 작성하여야 함

website: http://twitter.com/ 자기계정이름 확인

Keys and access token 선택하여 확인 API key와 secret 확인

Access token and secret: 재생(regenerate) 가능함

REST API: 사용자의 계정, 특정지역 별, 키워드 별, 타임라인, 트윗, 팔로워, 팔로잉 수집가능. 과거 일정 기간 발생한 트윗 데이터 추출을 지원

스트리밍 API: 실시간으로 발생하는 트윗 데이터 수집. 전 세계 트윗의 1%를 샘플링하여 수집. REST API처럼 키워드 별, 특정지역 별, 사용자 별 수집 가능

5-4-1-1) 웹 분석 응용(Open API)

5-4-2)네이버 Open API

네이버 API

https://developers.naver.com 중단의 [서비스 API] (네 번째 아이콘)클릭 [검색] 선택 후 <오픈 API 이용 신청>

[애플리케이션 등록(API 이용 신청)] 작성

애플리케이션 이름 선정> [비로그인 오픈 API 서비스 환경]에서 [WEB]을 선택하면 [웹 서비스 URL]나옴.

URL이 없으면 http://localhost라고 입력하고 <등록하기> 클릭

등록이 되면 [개요]탭에서 정보 확인

하단의 [비로그인 오픈 API 당일 사용량]을 보면 [0/25,000]으로 표시되어 있음. 하루 최대 25,000번 호출 가능하며 회당 최대 100건 추출 가능함. 일일 허용량 초과를 요청하려면 [API 제휴 신청]을 이용하여 신청. ID와 Client secret은 메모해 둘 것.

https://developers.naver.com 중단의 [서비스API]-[검색]을 [개발 가이드 보기]를 선책해 페이지로 이동하여 하단의 각종 네이버 document(블로그, 뉴스, 책, 영화, 기타 등등) 관련 [API 호출 예제] 확인 가능.

자기 앱 사이트 접근

https://developers.naver.com/apps#myapps/자기ClientID/overview

또는 네이버 계정 로그인 상태에서

https://developers.naver.com/apps#myapps

5-4-2-1) 웹 분석 응용(Open API)