UI와 API의 차이란?

Interface란?

 

Interface의 의미는 inter(서로) + face(얼굴, 면)입니다. 사전적 의미로는 서로 얼굴을 바라보는 마주보고 대화하는 것을 의미하는데요, 이것을 조금 더 넓게 해석해보면 서로 다른 두 물체가 상호 간 대화하는 방법이라고 규정할 수 있습니다.

서로 다른 물체가 마주보고(Inter) 대화하는 방법(face)

위 사진과 같이 사람과 사자가 대화를 하려고 하려고 하면 약속이 필요하겠죠. 가장 좋은 대화 방법은 <언어적 방법>보다는 <행동적 방법>이 가장 좋을 것입니다. 예를 들어서, 사람이 사자의 코를 누른다면 "어흥"소리를 낸다거나, 귀를 만지면 "야옹"소리를 낸다는 약속을 할 수 있을 것입니다. 이것을 다시 말하면, 서로 다른 시스템(사람, 사자) 간의 의사소통이 가능하도록 만든 접점(사자의 코, 귀)이라고 말할 수 있습니다.

 

UI(User Interface)란?

그렇다면 UI는 무엇일까요? UI는 User Interface입니다. 사람 입장(User)에서 컴퓨터와 의사소통이 가능하게 만드는 접점(Interface)을 의미합니다. 구체적으로는 하나의 키보드를 연상하시면 됩니다.

 

컴퓨터라는 키보드라는 접점(Interface)

사람이 컴퓨터라는 키보드 A라는 접점을 누르면 모니터에 A가 출력됩니다. 즉, 키보드 A를 누르면 컴퓨터 내부적 동작에 의해 모니터에 A가 출력됩니다. 키보드의 [ Window + R ] 키를 눌렀을 때 모니터에 실행창이 뜨고, [ Window + E ] 키를 누른다면 모니터에 파일탐색기가 뜨는 것도 접점(Interface)를 통해 컴퓨터와 대화하는 한 예입니다.

 

조금 더 UI를 살펴보면, 컴퓨터 모니터에서도 UI를 찾을 수 있습니다. 구글의 첫 화면 우측 상단에, Gmail, 이미지, 구글 App 의 탭이 있고, 앱을 클릭하면 아래와 같은 화면이 출력됩니다.

구글 App탭을 클릭했을 때 화면

 

사람이 컴퓨터와 대화할 때는 키보드(접점)을 통하여 대화하였지만, 구글이라는 브라우저와 대화할 때는 Gmail, 이미지, 구글 App 탭과 같은 부분이 접점이 되는 것입니다.

결국, User Interface는 사용자(User)입장에서 컴퓨터와 대화를 하는 접점(Interface)을 의미하며, 우리는 해당 접점(Interface)을 통해 화면에 "A"글자를 출력한다던지, 구글의 앱이 화면을 출력하는 특정한 결과를 얻는 것입니다

 

API(Application Programming Interface)란?

앞서 UI는 사용자(User)입장에서 대화를 위한 접점(Interface)를 의미한다고 하였습니다. 마찬가지로 API란 앱(Application Programming)입장에서의 대화를 위한 접점(Interface)라고 할 수 있습니다. 여기서 App입장에서 누구랑 대화하고, 점점은 무엇인지 생소할 수 있습니다. App입장에서는 자신보다 상위에 있는 시스템(윈도우 운영체제)과 대화하고, 접점은 특정한 Code(함수)가 되게 됩니다.

 

 

브라우저 상단에 [ javascript:alert("Hello Wolrd!"); ]라고 쳐보자

인터넷 브라우저 상단에 javascript:alert("Hello Wold");라고 하면 팝업창이 나온다. 이것은 alert("Hello World");라는 함수를 상위 시스템에 주었을 때, 해당 팝업을 돌려주는 것이다.

UI와 비교를 해보면, 사용자가 키보드 "A"를 누르면 시스템 내부 동작에 의해 모니터에 "A"가 출력되듯이, 화면에서 alert("Hello World");를 입력하면, 윈도우 운영체제가 해당 팝업을 띄워주는 것입니다.

 

즉,  API는 Application Programming입장에서 상위 시스템과 대화하기 위한 Keyboard와 같은 것입니다. 이 키보드는 "A", "B"와 같은 자판이 아니라 alert(); echo();와 같은 함수로 되어있다는 점이 다를 뿐입니다.

 

UI와 API의 관계를 그림으로 표현하면 아래와 같습니다.

좌측은 UI의 영역, 우측은 API의 영역

 

※ 여기서 실제로 chrome의 상위 시스템은 JVM이지만, 편의상 Window 운영체제로 설명했습니다.

 

< 참고자료 >

생활코딩 UI와 API : https://www.youtube.com/watch?v=Z4kH0IZVT-8