시리즈 2) UI, API 저 I는 뭘까....

서론

데브코스에서의 파이널 프로젝트가 1주일도 채 남지 않았다.
이번 프로젝트 때는 API관련 부분을 담당해보고 싶어서,
공부하다가 문득... API UI라는 용어를 내가 정확하게 알고 쓰는건가? 라는 생각이 뇌를 스쳤다.

I에 주목하자!

API : Application Programming Interface
UI : User Interface

여기서 두 용어 전부 interface라는 단어가 들어가있다는걸 알게됐는데, 여기서 I란 소통 수단이다

소통 예시

• 예시 1

  내가 정말 맘에드는 축구선수의 유니폼을 얻고싶은데, 그 선수가 내 앞으로 지나가고 있다.
  그럼 유니폼을 달라고 나는 말이란 걸 할 것이다.
  여기서 말이 바로 소통 수단 interface이다.

• 예시 2

  내가 컴퓨터를 켜고 싶다
  그럼 컴퓨터와 소통을 해야겠지???
  근데 내가 말로 컴퓨터야 켜줘.. 한다고 켜질까?
  절대 그렇지 않다.
  나는 전원 버튼을 눌러야한다.
  여기서 전원 버튼이 interface인 것이다.

• 예시 3

  내가 고기가 너무 먹고싶어서 음식점을 방문했다.
  물론 주방장한테 직접 요청할 수 있지만,
  여기서는 직원을 통해서만 요청할 수 있다고 가정하고, 직원에게 고기 3인분을 요청한다.
  그럼 주방장께서 고기를 열심히 만들어서 나에게 가져다 준다.
  여기서 직원이 interface이다.
내가 주방장한테 직접 말을 하지 않았는데, 직원이라는 interface를 통해서, 난 주방장에게 고기를 요청할 수 있었다

3가지의 예시를 통해서 interface가 무엇인지 알아볼 수 있었다.
그럼 정말 본격적으로 2가지만 알아보면 된다.

• interface는 알겠는데 User Interface는 무슨 인터페이스야?
• Application Programming Interface는 또 무슨 인터페이스야.....? 둘 다 무슨 소통일까?

웹의 흐름

유저 -> UI -> API -> 서버 -> DB

UI(User Interface)

정의 : 사용자와 application간의 소통

우리는 수 많은 application에 접속한다.
예를들어, 요새 스포츠를 좀 자주보는데
네이버 스포츠에 나는 자주 접속을 한다.
그럼 네이버 스포츠라는 웹 페이지가 있다.

거기서 축구를 클릭하면 축구 페이지로 가게되고,
축구 탭에서 또 원하는 팀을 클릭하면 팀 페이지로 간다.

여기서 click이 interface인데, click을 하라고 만들어놓은 버튼은 사용자를 위해 만들어놓은 버튼이다.
이게 UI이다

조금 더 풀어서 설명을 해보면, 내가 축구탭을 누른 이유는 축구 화면을 요청하기 위해서다.

위의 예시처럼, 내가 축구선수를 말로 부른 이유는 유니폼을 요청하기 위해서이다.

즉, 내가 축구 탭에 들어가기 위해 누른 버튼과,
유니폼을 요청하기 위해 선수에게 걸었던 말이 똑같이 interface인 것이고,
버튼은, 그 app을 사용하는 사용자와의 소통을 한 것이기 때문에 User Interface가 되는 것이다

API란?

위에 웹의 흐름에서
user -> UI를 통해서 user가 어떤 걸 원하는지 요청했다.
그럼 UI를 click 했을 때, 내 서비스가 서버에다가 요청을 해야하는데,
서버도 서비스기 때문에 서비스 <=> 서비스의 통신이 일어나게 된다.

API예시

1. 내가 상품 1개를 클릭함 (상품 사진은 유저와의 소통을 위한 UI)
2. 사진이 이제 API를 요청함 (식당으로 치면 종업원을 부름)
   get /items/1 => 메뉴판으로 치면 고기
3. 즉, 이렇게 요청을 하면 서버가 1번 상품의 데이터를 주게된다.

UI vs API

UI는 분명 내가 보이는 웹의 요소통해 소통을 요청한 것이었다.
API는 내 app과 서버가 소통하게 도와주는 종업원이었다.

즉, 나(사람) -> 어플리케이션 -> 서버
라고 나눴을 때
UI는 나와 app이 나누는 소통 도구,
api는 app과 서버가 나누는 소통 도구이다.