웹에플리케이션 만들기 – JS, PHP 프로그래밍 15 : UI, API

이번 시간에는 UI와 API라고 하는 주제에 대해서 알아보겠습니다 UI와 API라고 하는 이 개념은 여러분이 프로그래밍을 하는데 있어서도 상당히 유용한 개념이고 또 이 정보기술이 우리의 삶에 어떤 영향을 미치는가 라는 것을 이해하는데도 꽤나 유용한 인식의 틀을 제공하는 그런 개념이라고 할 수 있어서 제가 이 프로그래밍에 대한 기본적인 트레이닝을 끝낸 이 지점에서 이런 이야기를 좀 준비해봤습니다

UI라고 하는 것은 아마 들어본적 있는 분들이 많을 거예요 UI는 User Interface의 약자입니다 User는 사용자 라는 뜻이고요 Interface는 우리가 뒤에서 살펴볼 겁니다 그럼 API라는 것을 무엇일까요? API는 Application Programming Interface의 약자입니다 여기서 이야기하는 Application은 애플리케이션 앱, 프로그램 이렇게 불리는 것들을 이야기하는데요

다시 말해서, 어떤 프로그램이 어떤 프로그래밍 언어를 이용해서 무언가를 제어하려고 할 때 사용하는 그런 수단이라는 뜻인데 조금 뒤에 전체적인 의미를 알게될 것 입니다 그래서 이 UI라는 말과 API라는 말 좀 눈치가 빠르신 분들은 느꼈겠지만 뭔가 공통되는 부분도 있고, 다른 부분도 있었어요 우선 다른 부분은, 하나는 Application Programming이고, 하나는 User라고 하는 말의 약자라는 거죠 그리고 공통점은 둘 다 Interface라고 하는 뜻을 가지고 있습니다 그러면 이 공통 분모인 Interface라고 하는 것은 어떤 의미인지에 대해서 살펴볼까요? 이거는 좀 비유적인 표현인데 보통 이것을 Interface라고 하지는 않지만 사람과 사람이 서로 교류할 때 사용되는 가장 기본적인 도구, 기본적인 접점이 무엇일까요? 여러 가지가 있겠지만 언어이겠죠? 말이라고 하는 이 도구를 통해서 사람과 사람은 서로에 대한 정보를 주고받고 상대방에게 무언가를 요청하고, 뭐 이런 것들을 할 수가 있는 것 이죠 마찬가지로 이 위쪽에 있는 사람과 아래쪽에 있는 기계가 서로 소통하기 위한 서로 교류하기 위한 접점, 또는 그 접점에 해당되는 장치들이 있을 건데요 어떤 것이 있을까요? 이를테면 컴퓨터나 스마트폰은 전원버튼이 있어요 그 전원 버튼이 하는 역할은 이 시스템에게 "전원을 꺼라" 라는 것을 명령할 수 있는 채널인 것이죠 그리고 디스플레이라고 하는 것은 시스템의 상태를 사용자에게 알려주는 것이라고 할 수가 있습니다

바로 이러한 것들을 우리가 Interface라고 부르는 것이죠 그리고 이렇게 장치와 장치가 서로 소통하기 위한 접점에 존재하는 것으로는 이런 것을 들 수 있을 거에요 USB Interface 입니다 그리고 우리의 주제라고 할 수 있는 이런 웹 애플리케이션이 아래쪽에 있는 웹브라우저와 교류할 수 있는 접점들이 존재하는데 그 접점을 살펴보자는 거죠 이 코드는 우리가 이전에 JavaScript를 공부하면서 배웠던 코드입니다 즉, prompt 라고 하는 저 코드를 통해서 “비밀번호를 입력해주세요”라고 하는 메시지가 찍혀있는 프롬프트 창을 실행시키는 코드가 바로 아래쪽에 있는 코드이고, 그 코드의 결과가 위쪽에 있는 화면인 것이죠 이 화면이 위쪽에 있는 화면이 하는 역할은 무엇일까요? 사용자의 어떤 정보를 받아서 애플리케이션에게 전달하는 것이 바로 프롬프트 창이 하는 역할인 것이죠 그리고 저 프롬프트 창이 실행되기 위해서 우리가 웹브라우저에게 JavaScript의 문법에 따라서 전달한 코드가 바로 아래쪽에 있는 것 입니다 그래서 위쪽에 있는 이 사용자가 직접 조작하는 저것을 직접 조작하는 바로 저 Interface를 뭐라고 부르냐면 UI라고 부릅니다

User Interface 인 것이 고요 우리가 만든 웹애플리케이션이 프롬프트 창을 실행시키기 위해서 JavaScript의 문법에 따라서 웹브라우저에게 전달한 저 명령을 뭐라고 하냐면, API라고 하는 겁니다 애플리케이션이 무엇인가를 하기 위해서 프로그밍적으로 그 애플리케이션이 돌아가는 시스템에게 전달하는 명령, 그런 것들을 Application Programming Interface 라고 한다는 것이죠 이쯤에서 여러분들에게 뭐 하나 여쭈어볼게요 여기에 있는 이 프롬프트 창 우리가 만든 웹애플리케이션에서 실행된 저 프롬프트창은 여러분이 만든 것일까요? 아닐까요? 어떻게 생각하세요? 저 프롬프트 창을 여러분이 만든 것 일까요? 아니면 다른 무엇인가가 만든 것 일까요? 여기에 정답이 딱히 있다고 생각하진 않지만 만약에 저에게 물어봤다면, 저는 “제가 만들기도 했고, 제가 만들지 않기도 했습니다” 라고 이야기를 할 거 같아요 왜냐하면, 여기에 있는 “비밀번호를 입력해주세요”라고 하는 저 코드를 우리가 웹브라우저에게 제출했기 때문에 웹브라우저는 여기에 “비밀번호를 입력해주세요”라고 적어준거죠 그런 면에서는 우리가 만든거라고 할 수가 있습니다 그리고 이 prompt 라고 하는 명령은 프롬프트 창을 실행시키는 명령인데 바로 저 명령을 웹브라우저에게 제출했기 때문에 웹브라우저는 프롬프트 창을 실행시킨 것이죠 그렇게 본다면 이 창은 우리가 만든 것 이라고 할 수 있겠죠 그런데 여기 있는 이 코드에 엑스버튼(X)이 있으라는 내용이 들어있나요? 또는 버튼이 두 개 있어야 되고, 하나는 확인 하나는 취소라고 적혀있어야 된다는 내용이 이 코드상에 포함되어 있나요? 또는 이런 사용자의 입력을 받는 저런 창이 있어야 된다는 이야기가 여기에 한마디라도 언급된적이 있냐는 것이죠 그런 것을 언급한적도 없는데, 우리가 prompt라고 하는 이름에 명령을 내렸을 뿐인데 이런 화면이 뜨는 것은 결국에 이 프롬프트 창이 “우리가 만든게 아니기도하다

” 라는 것을 의미하는 거라고도 볼 수 있지 않을까요? 바로 그런 점에서 저 프롬프트 창은 기본적으로 우리가 만든 것이 아니라 누가 만든거냐면 웹브라우저가 미리 만들어놓고 준비하고 있는 것이라고 할 수 있습니다 그리고 우리는 이 prompt라고 하는 저 코드를 웹브라우저에게 실행함으로써 웹브라우저가 미리 만들어 놓은 저 프롬프트 창을 웹브라우저가 실행할 수 있도록 명령하고 있는 것이에요 바로 그런 점에서 저 prompt는 일종의 Interface인데 즉, 우리가 만드는 애플리케이션이 웹브라우저에게 무언가를 요청하는 Interface인데 바로 애플리케이션이 프로그래밍적으로 요청하는 Interface이기 때문에 이것을 API라고 부른다라는 것이죠 한 번에 이해가기 쉽지 않을 수 있습니다 그럼 이 관계를 조금 더 깊게 살펴볼까요? 여기보시는 것 처럼, 이 한 겹 한 겹의 판들이 여러 겹으로 쌓여있는 어떤 구조물 어떤 건물이 있다고 생각해보죠 그리고 각각의 층마다 무언가가 있는데 그 각각의 무언가들이 컴퓨터 또는 스마트폰 이런 것들을 구성하고 있는 구성요소라고 생각해보고 그것들을 우리가 한번 분해를 한번해보자는 거죠 그러면 가장 꼭대기에 뭐가있냐면 사용자가 시스템을 제어할 때 사용하는 이렇게 생긴 접점인 User Interface가 존재합니다 그리고 저 User Interface를 만든 것은 누구냐면 바로 우리가 만든 웹 애플리케이션이 prompt라는 명령을 웹브라우저에게 하달함으로써 프롬프트 창이 실행되게 된 것이죠 우리가 만든 것은 저 웹 애플리케이션을 만든겁니다 그런데 제가 앞서 말씀드린 것 처럼, 저 prompt라는 명령에 대응되는 실제 프롬프트 창을 만든 것은 바로 웹브라우저라고 말씀드렸고 그리고 동시에 웹브라우저 역시도 그 프롬프트 창을 혼자서 모든 것을 다 만든 것이 아니라 보시는 것처럼 이렇게 이런 버튼들 그리고 여기에 있는 입력을 받는 저런 텍스트 필트라고 하는 것 그리고 이렇게 생긴 소위 대화상자라고 하는 이런 것들 이런 것들은 웹브라우저가 직접 만든 것이 아니라 운영체제가 미리 만들어 놓고 웹브라우저가 그것을 API를 통해서 호출해서 프롬프트 창을 이렇게 저렇게 조립해서 만들게 되는 겁니다

즉, 프롬프트 창은 웹브라우저가 혼자 만드는 것이 아니라 운영체제가 제공하는 바로 저런 작은 부품들을 조립해서 만든 거라고 할 수 있어요 바로 그런 방법을 통해서 웹브라우저는 운영체제를 이용해서 만들게 됩니다 그렇다면 운영체제는 어떻게 만들까요? 여기서부터는 좀 불분명한 측면이 있지만 우리가 기술의 어떤 다칭성이라는 것을 설명드리기 위해서 제가 이야기하는 겁니다 엄밀한 이야기들은 아니라는거 참고적으로 알아두시고 제 이야기를 들으시면 좋겠습니다 이런 운영체제도 처음부터 뚝딱하고 하늘에서 만들어진 것이 아니겠죠? 바로 이런 C와 같은 언어들을 이용해서 우리가 운영체제를 만들게 됩니다

그리고 이러한 C와 같은 언어는 이것 역시도 처음부터 뚝딱 있었던 것이 아니라 어셈블리어라고 하는 아주 오래된 언어를 이용해서 C와 같은 프로그래밍 언어를 또 만들게 되는거죠 즉, 언어를 만드는 언어라는 뜻이에요 그리고 이 어셈블리어는 그것 보다도 더 기계에 가까운 바로 기계어라는 것에 의해서 만들어지거나 또는 대응된다라고 이야기할 수 가있는데요 우리가 기계어라는 것을 구체적으로 알지 못해도 컴퓨터라는 기계가 결국에는 0와 1로 이루어져 있다는 아주 유명한 얘기를 들어본적 있으시죠 바로 이것이 기계어라는 것이고, 기계어는 어떻게 보면 소프트웨어의 가장 깊은 곳에 있는 기술이라고 할 수가 있습니다 그래서 우리가 기계와 같은 기술을 로우레벨의 아주 아래쪽 레벨에 존재하는 기술이라고 해서 Low Level Technology 라고 합니다 그리고 우리가 지금 살펴본 이 이야기에서 가장 꼭대기에 있는 것, 위쪽에 있는 기술 일수록 High Level 고수준의 고급 기술이라는 표현을 쓰게돼요

아무튼 이렇게 해서 우리는 제일 위에 있는 UI부터 시작해서 점점 더 소프트웨어의 심연으로 내려오고 있는데요 그 가장 밑바닥에서 기계어를 걷어내면 무엇이 존재하냐면, 바로 전자공학의 표면을 만나게 됩니다 우리가 언뜻 들어본 듯한 CPU, RAM 바로 이러한 것들이 전자공학에서 만들어내는 그런 소위 하드웨어라고 하는거라고 할 수 있습니다 그리고 이 전자공학의 기본적인 메커니즘은 이 전기를 켜고, 끄고하는 것을 일종의 정보화시킨 거라고 할 수 있고 전기가 켜지고 꺼지고에 해당되는 것들을 소프트웨어, 즉 기계어에서는 0와 1이라고 하는 그 두 가지의 숫자로 대응을 시켜서 소프트웨어를 만들게 됩니다 물론 이과정은 상당히 복잡한 것이 기 때문에 우리 수업의 범위를 넘어서요

이해 못하셔도 아무 문제없는 이야기입니다 그리고 이 거대한 제가 한 장으로 표현했지만 굉장히 거대한 이 전자공학의 심연에서 전기공학을 만나게 되는 것이죠 전기공학이라는 것은 전기를 생산하고, 전기를 전송하고, 그것을 통해서 무엇인가 이 운동에너지로 바꾸는 이런 것들을 포괄하는 학문이라고 할 수 있겠죠 그리고 이 전기공학은 바로 물리학이라고 하는 곳에서 출발한 학문이라고 할 수가 있을 겁니다 어때요 우리가 무심코 사용하는 이런 스마트폰이나 또는 컴퓨터와 같은 기계는 결코 평면적인 기술이 아니라 지금 보시는 것 처럼 다칭적으로 다양한 레벨의 기술들이 협력해서 이런 시스템을 만들게 되는 것 이라는 거죠 그리고 각각의 한 장 한 장이 한 사람이 평생 노력해도 그 분야를 통달하기 어려울 만큼 방대한 내용을 담고 있다고 생각하면 이 컴퓨터라고 하는 것을 다른 시각으로 보게 되지 않나요? 그리고 각각의 층과 층 사이는 API, Application Programming Interface라는 것을 통해서 교류하고 있다는 것이죠

그것이 바로 API, 그리고 또 하나 우리는 UI라는 것도 같이 살펴보았습니다 지금까지 제가 말씀드린 이 API라는 개념을 통해서 제가 이야기하고 싶은 것은 오늘날 이 시대를 저는 이렇게도 이야기해 보고 싶다는 겁니다 API전성시대 이게 무슨 뜻인지 살펴볼까요? 과거에는 API를 제공하는 시스템이 운영체제에 정도가 있었어요 우리가 알고 있는 Unix, Linux 또는 Microsoft Windows 그리고 OSX 이러한 것들 운영체제라고 하는 이 거대한 기반 시스템들이 API를 유일하게 제공하고 있었기 때문에 어떤 소프트웨어를 만든다라는 것은 결국에 이러한 운영체제 위에서 직접적으로 돌아가는 애플리케이션 다른 말로는 프로그램을 만드는 거라고 할 수가 있었습니다

그런데 그 여러 수많은 프로그램 중에 특이점을 가지고 있는 독특한 프로그램이 하나생겼는데 무엇이냐 하면 웹브라우저라는 겁니다 이 웹브라우저라고 하는 것은 운영체제 입장에서는 그냥 일개 소프트웨어에 불과했어요 운영체제 위에서 동작하는 수 많은 소프트웨어 중 하나에 불과했습니다 그런데 이 웹브라우저는 운영체제 위에서 동작하는 하나의 애플리케이션이지만 동시에 스스로가 API를 가지고 있었기 때문에 웹브라우저 위에서 동작하는 수많은 웹 애플리케이션들이 등장하게 됐다는 것이죠 그것이 우리가 배우고 있는 이 수업의 대상이라고 할 수가 있겠죠

그런데 이 웹이라고 하는 것이 발전하는 과정에서 수많은 웹 애플리케이션들이 만들어졌는데 그 수많은 웹 애플리케이션들 중에서 무엇인가 좀 특이한 녀석들이 또한 등장하기 시작했다라는 것 입니다 바로 이 특이한 녀석들은 굉장히 많은 사람들이 사용하는 서비스들이고 그리고 무엇 보다도 중요한 특징은 마치 운영체제 처럼 또 웹브라우저 처럼 스스로 API를 제공하기 시작했다라는 겁니다 그래서 우리가 소위 페이스북 앱 또는 구글 플러스 앱 또는 트위터 앱 이러한 것들이 만들어졌다라는 것이죠 그래서 게임이라든지 여러 가지 기타 등등 다양한 애플리케이션들이 이런 웹사이트를 기반으로 해서 동작하게 되었다라는 것이죠 바로 이러한 변화에 의해서 API가 폭발적으로 증가하게 됩니다

그런데 여기서 끝이 아니에요 이것은 어떤 제가 PC를 중심으로 말씀드렸지만 PC뿐만 아니라 이후에 스마트폰이 등장하면서 스마트폰이라는 새로운 플랫폼이 또한 당연히 API를 제공했고 그 API를 제어해서 만들어진 수많은 애플리케이션들이 폭발적으로 증가하게 됩니다 그리고 지금은 스마트폰 뿐만 아니라 수 많은 디바이스들 예를 들면 보일러 또는 자동차 또는 우리 집에 있는 현관문 심지어 우리가 아주 하찮게 생각하는 전구 조차도 인터넷에 연결되서 동시에 프로그래밍을 통해서 우리가 제어할 수 있는 API를 제공하고 있다라는 겁니다 그래서 제가 생각하기에 지금 우리가 살고 있는 시대에 아주 중요한 주목할 만한 변화는 크게 두 가지 입니다 하나는 “API가 폭발적으로 증가했다“라는 것이고 또 하나는 "과거에 비해서 훨씬 더 사용하기 좋고 과거에 비해서 훨씬 더 인간 친화적인 프로그래밍 언어가 등장하고 있다”라는 것이죠

이런 맥락에서 우리가 어떻게 프로그래밍이라고하는 분야에 접근할 것인가라고하는 그런 고민들을 아마 가지고 계실 것 입니다 저도 사실가지고 있는데 이에 대한 저의 주관적인 생각은 제가 시간이 좀 많이됐기 때문에 다음 영상에서 이야기해 보겠습니다