[API 개념] API를 엮는다..? API 이것 뭐예요?

안녕하심니까! 프로덕트 디자이너 메리입니다.
오늘은 조금 피로한 수요일입니다..
요즘 밤마다 velog 쓰는게 낙이라(velog도 락이다) 또 업로드하러 왔습니다.

오늘은 디자이너가 알아두면 개발자와 소통이 정말 편해지는 'API'에 대해 함께 알아보려고 합니다! 회의할 때 API라는 단어 정말 많이 들어보시지 않았나요? 자, 오늘도 드가봅시다.

API의 의미에 대하여

API는 'Application Programming Interface'의 약자이며, 쉽게 말해 서로 다른 소프트웨어가 데이터를 주고받을 수 있도록 만들어진 연결 통로라고 생각하면 됩니다. 우리가 배달 앱에서 주소를 입력하면 자동으로 지도가 나타나는 것도 API 덕분이에요!

🔗API를 '엮는다'는 건 무슨 의미일까요?

개발을 진행할 때 "API를 엮는다"는 표현을 쓰는데요, 이건 여러 서비스나 데이터를 연결해서 하나의 기능으로 만드는 걸 의미해요. 예를 들어, 네이버 쇼핑에서 상품을 검색할 때, 네이버 자체 상품뿐만 아니라 다른 쇼핑몰 상품 데이터까지 함께 불러오는 것도 API를 엮어서 사용하는 사례입니다.

간단하게 크롬과 크롬 확장프로그램으로 예시를 들어보려 하는데요.
크롬이 하나의 큰 애플리케이션(서비스)이라면,
크롬 확장 프로그램은 외부에서 제공하는 추가적인 기능(서비스)이죠.

즉, 크롬(본체)과 확장 프로그램(추가기능)을 연결하는 방식을
"API를 엮는다"라고 비유하면 아주 이해하기 쉽습니다. (참 쉽죠?)

예를 들어, 크롬이 기본적으로 없는 기능을 확장 프로그램을 통해 추가하듯,
우리 서비스에 없는 기능을 외부 API를 이용해서 쉽게 추가하는 거라고 보시면 됩니다.

디자이너가 만든 UI와 API는
어떻게 연결될까요?

디자이너가 UI를 설계하면, 개발팀은 그 UI를 실제로 동작하게 만들기 위한 API를 준비합니다. 예를 들어, 디자이너가 소셜 로그인 기능을 만들기 위해 카카오톡 로그인 버튼이나 구글 로그인 버튼을 설계하면, 프론트엔드 개발자는 버튼 클릭 시 카카오톡 또는 구글 로그인 API를 호출하는 코드를 작성합니다. 백엔드 개발자는 이 호출에 따라 로그인 정보의 유효성을 확인하고 사용자 정보를 전달하는 API를 만들어 프론트엔드와 연결합니다.

UI를 만든 후 개발은 어떻게 진행될까요?

디자이너가 UI를 설계한 후에는 프론트엔드와 백엔드 개발자가 함께 'API 명세서'를 작성합니다. 이 API 명세서는 어떤 데이터를 주고받을지, 요청 방식은 어떤지, 응답 데이터는 어떻게 구성될지 상세히 기록하는 문서입니다. 이 과정을 통해 디자이너가 만든 화면을 실제로 작동하게 만드는 구체적인 방법을 명확하게 정리하는 것이죠.

API 명세서는 요렇고롬 생겼는데요. 대부분 노션 혹은 구글 스프레드시트를 통해 관리하시는 듯 합니다. 간단하게 이렇게 들어가는데요.

[API 명세서 항목]

1) 기능명(ex.소셜로그인)
제곧내. 첫번째로 기능명이 들어갑니다.

2) HTTP 메소드 (GET/POST/PUT/DELETE)
저번시간에 배운 개념입니다. 쉽게 말하자면 데이터를 가져오고(GET),생성하고(POST), 수정하고(PUT), 지우고(DELETE) 중에 어떤 항목이냐! 라는 뜻입니다.

3)요청 파라미터 (Request Parameters)
API를 호출할 때 전달하는 데이터의 항목과 형식입니다.
인스타그램으로 예시를 들자면,유저가 로그인을 할 때 이렇게 데이터가 전달된다고 예시를 들어볼게요.

• 사용자 ID (user_id) : 123456789
• 인증 토큰 (auth_token) : abcdefg12345

4)응답 데이터 (Response Data)
그러면 요청을 보냈으니, 데이터가 응답해줘야겠죠? 이 응답 데이터는 API 호출 후 반환받는 데이터의 항목과 형식을 뜻합니다.

• 사용자 이름: "mary_kim"
• 팔로워 수: 200
• 팔로잉 수: 150
• 프로필 이미지 URL: "https://example.com/profile.jpg"

이 로직을 파악하면 API 호출도 바로 이해할 수 있습니다!
API 호출이란 특정 기능이나 데이터를 요청하는 과정을 뜻하는데요.

예를 들어, 사용자가 ‘내 주문 목록’을 클릭하면 프론트엔드는 '주문 목록 API'를 호출하고, 서버는 이 요청에 따라 주문 목록 데이터를 반환해 줍니다.

이처럼 데이터를 요청하고 응답받는 과정을 ‘API 호출’이라고 합니다.

실제 서비스에서 사용하는 API 사례

우리가 자주 이용하는 쿠팡 사이트를 예로 들면, 결제를 할 때 KG 이니시스 결제 API가 호출되어 결제 정보를 주고받습니다. 또 카카오톡 앱에서는 카카오페이 API를 통해 송금이나 결제를 빠르게 처리할 수 있습니다. 이처럼 많은 서비스가 API를 통해 외부 서비스와 데이터를 연결하고 있어요.

API가 존재하지 않으면 개발이 어려운 기능은?

디자이너 입장에선 간단해 보이지만 개발하기 까다로운 기능들도 있습니다.
예를 들어, 이미지에서 특정 물체나 사람의 얼굴을 인식하거나 음성 인식으로 앱을 조작하는 기능은 이미 만들어진 API가 없다면 개발이 매우 어렵고 비용도 많이 들어갑니다. 이런 기능을 계획할 때는 미리 API가 있는지 반드시 확인해 봐야 해요.

디자이너가 API를 활용할 수 있는 실제 사례

디자이너가 제품에 특정 기능을 넣고 싶을 때, 직접 모든 기능을 개발하는 대신 기존에 제공되는 API를 활용할 수 있습니다. 예를 들어, 제품에 지도 기능을 넣고 싶다면 카카오 지도 API를 활용하면 됩니다. 디자이너는 지도 화면을 설계하고, 개발팀과 API 연동에 대해 명확히 소통하면 훨씬 빠르고 효율적으로 기능을 구현할 수 있죠.

디자이너가 API를 알면 좋은 이유

디자이너가 API와 HTTP 메소드를 알면, 화면 설계나 기능 기획이 훨씬 구체적이고 효율적이게 됩니다. 예를 들어, 버튼이나 메뉴 하나를 설계할 때에도 API에서 어떤 데이터를 주고받는지 명확히 이해하고 있다면, 개발자와의 소통에서 훨씬 효과적으로 의견을 전달할 수 있습니다.

또한, 디자이너 입장에서 기획한 기능이 API로 실현 가능한지 미리 판단할 수 있어, 불필요한 재작업과 시간 낭비를 줄일 수 있답니다!

마무리 👊🏻

이렇게 API와 HTTP 메소드를 이해하고 있으면, 개발팀과의 협업이 더욱 매끄러워지고 업무 효율성도 높아집니다. 우리가 초반에 그리는 IA, 플로우차트는 명목상 만드는게 아닌, "아하! 이렇게 데이터가 왔다갔다 하군! API를 이때 호출하면 되는거군!" 하고 개발자분들이 이해하는 도식이라고 보시면 될 것 같네요.

추가적으로, 이 API개념과 HTTP 메소드를 이해하면 데이터가 제대로 응답하지 않았을 시, 생기는 다양한 에러케이스를 고려해서 기획을 할 수 있답니다. (우리가 냅다 에러 팝업 UI를 만들기 전에, 에러케이스를 사전에 정의하고 꼼꼼하게 작업할 수 있다는 장점이 있죠.)

적다보니 기획이란.. 이런 개념을 잘 알아야 누락없이 잘할 수 있는 것 같네요 🥲 (돈벌기 힘들다)
그럼 다음에도 유익한 내용으로 돌아오겠습니다!