[생활코딩] UI와 API의 차이

UI, API는 둘다 Interface다

UI = User Interface
API = Application programming Interface

UI라는 단어를 많이 들어보았는데, API는 뭔지 몰랐다. 알고보니 둘다 Interface의 개념이라는 것이다. UI는 UX와 언제나 같이 쓰이는 단어인줄 알았더니, 또다른 식구가 있었구나. 비개발자/개발자들의 구세주 '생활코딩'을 따라 UI와 API의 개념에 대해 살펴보는 것을 시작으로, 앞으로 광활한 코딩의 세계에 조금씩 친숙해져볼까 한다.

---

 

UI = User Interface

컴퓨터라는 시스템과 사용하는 사람의 접점에 존재하며, 사람이 생각하는 걸 컴퓨터에게 전달하는 입력장치, 컴퓨터의 상태를 사람에게 전달하는 출력장치가 바로 UI다. 사용자를 대면하는 접점이 되는 지점을 포괄적으로 UI라고 부른다. 

ex.웹에서 버튼, 스크롤바 등등을 UI라고 할 수 있다. 

 

API = Application Programming Interface

쉽게 말해, 코드의 형태를 띄고 있는 개발자들의 인터페이스다. 코드들을 다양한 방법으로 결합해서 application을 만들게 되고, 사용자가 쓰는 인터페이스와 구분하기 위해 API라고 부른다. 

ex. 브라우저에 "javascript:alert("Hello world")라고 검색하면, Hello world라고 쓰인 경고창이 뜬다.

javacrpit: 는 이하의 내용이 javascript 언어라는 의미이고, 

alert는 호출을 의미하는 API,

"Hello world"는 호출의 내용을 의미한다. 

 

=> '웹브라우저'라는 기반이 되는 시스템의 alert과 같은 interface를 응용해서 개발자가 어플리케이션을 만든다는 것이다. 그렇다면 alert라는 텍스트를 브라우저에 입력하면, 경고창을 띄워주는데, 이 경고창은 누가 만드는 것일까? 웹브라우저 개발사에 소속되어 있는 개발자들이 만드는 것! 마이크로소프트, 애플, 구글 등등. 

 

깨알 응용해서 크롬 브라우저에서 자기소개 경고창을 띄워보았다. ㅎㅎ 

 

API를 통해 웹브라우저를 제어한다. 개발자와 개발자가 아닌자를 가르는 가장 큰 차이는, 

개발자가 아닌 사람들은 UI를 통해 시스템을 제어하고, 개발자는 API를 이용해서 자신의 맥락에 맞게 그것들을 응용해서 aapplication(ex. 웹브라우저)을 제어하게 되는 것이다. 개발자들의 UI가 API라고 보면 될 것 같다. 

 

그렇다면, 웹브라우저의 버튼, 아이콘들은 누가 만드는 것인가?
웹브라우저를 운영하고 있는 운영체제(ex. 마이크로소프트 윈도우)의 개발자들이 버튼/아이콘들을 미리 만들고, 웹브라우저 개발자가 이미 만들어져있는 아이콘을 호출해서 조합하면 이러한 경고창을 만들 수 있도록 미리 준비해둔 것이다. 

웹브라우저 개발자도 운영체제가 제공하는 API를 이용해서 웹브라우저를 만들게 되는 것이다.

 

 

이 광활한 세계 속 나는 어디에 있나

맨 첫번째 삼각형을 보면, 비개발자의 세계는 '사용자'의 세계다. 사용자가 시스템을 이용하기 위해 대면하는 것은 UI다. 그리고 사용자에 가장 가까운 다음 단의 개발자의 세계는 웹 개발자, 혹은 앱개발자라고 할 수 있다. 그 밑에는 브라우저, 그 밑에는 운영체제, ·······, 그렇게 쭉쭉쭉 내려가서 0,1로 표현되는 기계어의 단계까지 내려갈 수 있다. 그리고 그 밑으로 내려가면  전자공학, 전기공학의 세계로 들어간다. 실로 거대한 세계라는 거다. 이 각각의 층이 있는데, 그 각각의 것을 interface라고 부르며, 우리가 프로그램을 만든다면 그때 우리가 사용하는 것은 API가 되는 것이다. 

 

개발자는 기반이 되는 시스템의 인터페이스를 이용해서 어떤 응용프로그램을 만들 수 있다. 만약 우리가 만들어낸 그 응용프로그램을 사용하는 개발자들이 다시 그 응용프로그램을 이용해서 또 다른 시스템을 만들 수 있도록 인터페이스를 만든다면, 우리가 시스템/운영체제의 개발자라는 입장이 되는 것이라고도 할 수 있다. 

 

 

---

참고자료

https://youtu.be/Z4kH0IZVT-8