[javascript 언어공부]UI와 API

이번시간에는 UI/API에 대해서 알아보자.

UI는 USER INTERFACE의 약자이며

API는 APPLICATION PROGRAMMING INTERFACE의 약자이다.

UI와 API의 공통점은 INTERFACE이며

차이점은 USER / APPLICATION PROGRAMMING 이다.

우선 UI에 대해서 알아보자.

컴퓨터가 한대 있다고 생각해보자.

우리가 컴퓨터를 제어하기 위한 방법은, 

1. 버튼을 누르거나

2. 터치패드를 움직이거나

3. 노트북 뚜껑 열었다 닫았다

하는 것을 통해서 노트북이라는 컴퓨터를 제어할 수 있게 된다.

동시에 컴퓨터의 상태 - 컴퓨터를 통해서 계산된 것 들은 DISPLAY에서 보여지거나

스피커를 통해 시스템의 상태를 알려준다.

컴퓨터 시스템과 / 컴퓨터 사용하는 사람 사이의 접점에 위치하면서

입력장치, 출력장치들에 해당되는 접점/ 중계자에 해당하는 것을 USER INTERFACE라 한다.

시스템 입장에서 UI는 사용자를 대면하는 접점이 되는 지점을 포괄적으로 이야기 하는 것이다.

사이트의 버튼 등도 다 UI이다. 앞서 살펴본 노트북의 UI는 물리적인 기계 조작장치가 있는 하드웨어적 UI라 한다면, 

이는 소프트웨어로 구현된 것이지만. 사용자의 의중을 시스템에게 전달하고, 시스템의 상태를 사용자에게 보여준다는 점에서

이것도 UI라 할 수 있다. 

그렇다면 API란 무엇일까?

브라우저 주소창에

javascript:alert("Hello World");

라고 쳐보자. hello world라고 써져있는 경고창이 뜰 것이다. 

코드를 살펴보면.

javascript: 라는 부분은 이 뒤에 오는 부분이 javascript언어라는 뜻이고, 

alert이라는 부분은, 한국어로 경고/알림이라는 뜻으로 경고창을 띄워주는 역할을 하는 명령어이다.

마지막으로 괄호안에 들어가있는 hello world는 우리가 경고창에 hello world를 표시하고 싶어하는 것이다.

이런식으로 컴퓨터 코드를 작성해서 브라우저에 전달하면, hello world가 쓰인 경고창 ui를 화면에 띄우게 된다.

그렇다면 생각해보자,

이 경고창은 내가 만든 것일까 아닐까?

이고잉님이라면, 이 경고창은 제가 만들기도 했고, 제가 만들지 않기도 했습니다.

라고 이야기 할 것 같다고 한다.

또 경고창을 닫기 위해 x표시를 누르면 그 부분이 빨간색으로 변하고, tooltip으로 닫기 라는 멘트가 뜬다.

우리는 javascript:alert("Hello World"); 이 코드에 그런 명령을 준 적이 없다.

또 확인버튼을 눌렀을 때도 색상이 바뀌고 있고, 

또 확인버튼 누르기 전에 경고창 옆 부분을 클릭하면 땡땡땡 거리며 어떤 ui도 사용할 수 없게 해 놓았다.

하지만 우리가 지시한 것이 아니다.

또 경고창이 화면의 가운데에 위치하고 있는데 이 또한 우리가 한 것이 아니다.

이런점에서 경고창은 우리가 만든 것이 아니다.

그 반면에 경고창이 실행된 이유는 alert이라는 명령을 브라우저에 전달했기 때문이고, hello world라는 메세지도 전달했기 때문이다. 

이런 점에서 이 경고창은 우리가 만든 것이 아닌 동시에 우리가 만든 것이기도 하다.

이 alert이라는 명령은 우리에게 있어서 웹브라우저를 제어하기 위한 interface인 것이다.

하지만 이 interface는 일반적인 사용자가 사용하는 버튼이나 scrollbar같은 인터페이스는 아니고,

코드형태를 가지고 있는 interface이다.

우리는 이러한 코드들, 웹브라우저를 제어하기 위한 코드를 다양한 방법으로 결합해서 애플리케이션을 만든다.

이런 점에서, alert같은 interface를 사용자 interface를 구분하기 위해, 이를 application programming interface라 부르는 것이다.

그러면, 이 경고창은 도대체 누가 만드는 것일까?

이 경고창은 웹브라우저 개발사에 소속돼있는 개발자가 만드는 것이다.

대표적인 회사는 internet expolor , safari, chrome, firefox 등등이다.

이제 경고창과 브라우저를 한번 살펴보자.

브라우저의 x버튼과 경고창의 x버튼은 사실상 같다.

브라우저 개발자들도 경고창을 만들때 하나부터 열까지 다 만드는 것은 아니다. 

이는 운영체제 개발자들, 즉 window의 개발자들이 버튼과 아이콘은 미리 만들어 놓고,

웹브라우저 개발자가 미리 만들어져 있는 버튼들을 호출해서 결합하면 경고창을 만들 수 있도록

준비해 두는 것이다.

웹브라우저 개발자도 마찬가지로 운영체제가 제공하는 api를 통해서 웹브라우저를 만드는 것이다.

즉 우리는 

javascript:alert("Hello World"); 코드를 제출해서 경고창이 뜨게한 점에서는 

브라우저가 일종에 기반시스템이며 우리는 이를 이용해 응용프로그램을 만든것이며 응용프로그램 개발자가 된 것이다.

그리고 윈도우 개발자들은 웹브라우저 개발자가 가져다가 쓸 수 있도록 미리 버튼 등을 만들어 놓고, 브라우저 개발자들은 운영체제가 제공하는 api를 이용해서 웹브라우저를 만들게 되는 것이며, 이 맥락에서 윈도우 개발자는 플랫폼(기반시스템) 개발자이며, 브라우저 개발자들은 응용프로그램 개발자가 되는 것이다. 

이처럼 계창적 관계가 있으며,

위에층과 아래층의 접점이 되는 것이 interface라고 할 수 있다.

▼ 이런 역삼각형 건물을 한번 만들어보자.

가장 많이 존재하는, 맨 위 층은 사용자가 존재한다. 

.

그리고 사용자가 밑에 있는 기반되는 시스템들을 제어하기 위해서는 ui를 통해서 제어한다.

그리고 ui접점 밑에서 시스템을 구축하는 사람들은,

사용자가 제어할 수 있는 시스템을 만드는 사람들을 개발자라 한다.

퉁치면 개발자이지만, 세세하게 나눌 수 있는데,

사용자 바로 밑에 층에 있는 개발자는 웹개발자, 게임개발자 등이 있으며 여기선 웹개발자라고 해보자. 

그 밑에층에는 웹개발자가 웹 애플리케이션을 만들수 있도록 하는 웹브라우저 개발자가 있고

그 밑에는 운영체제 개발자가 있으며,

그 밑에는 그 운영체제를 만들수 있는 언어인 C나 C++이 있고,

또 그 밑에는 어셈블리어같은 언어이며

또 그 어셈블리어는 기계어를 기반으로 한다. 

밑으로 내려갈수록 더 적은 사람들이 종사하고 있으며,  

위에 층은 아래층에 있는 것을 응용해서 사용하게 되는 것이다.

이를 통틀어 소프트 웨어 공학(전산 공학)이라 하면

그 아래에는 전자공학이 있고

그 아래에는 전기공학이 있다.

이처럼 각각의 층이 있고, 그 층과 층 사이에 있는 것을 interface라고 한다