다우기술 전사 세미나 발표자료 "API First Design 설계의 선순환"

1. @OpanAPISpec @SwaggerCodegen @Daou_S/W_Labs @Design
API First Design
설계의 선순환
• 다우기술 비즈 플랫폼팀 김 정규

2. APIFirstDesign 설계의선순환
안녕하세요 J
다우기술 비즈 플랫폼 팀 김 정규 입니다.
Introduce
다우오피스 로그 플랫폼 구축 및 유지보수 담당.
책을 좋아하고,
발표를 즐겨하며,
사람을 좋아합니다.
joenggyu0@gmail.com
hihi3039
LenKIM

3. APIFirstDesign 설계의선순환What is API First Design?

4. 협업하는 개발 프로세스에서 API 를 첫 번째 우선 순위로 가져가는 것
API First Design 설계의 선순환
왜 API-First가 필요한 걸까?
API-First Design 의미란 무엇일까?
어떻게 API-First Design 동작 되는 걸까?
API-First Design 의 장점은 무엇일까?
SwaggerCodeGen 을 활용한 API-First Design 실천 해보기
Road Map
APIFirstDesign 설계의선순환What is API First Design?

5. API-First Design
APIFirstDesign 설계의선순환What is API First Design?

6. API-First Design
APIFirstDesign 설계의선순환What is API First Design?

7. Release 가 증가함에 따른 개발 비용
APIFirstDesign 설계의선순환
COST/ LOC
0
50
100
150
200
250
300
350
400
1 2 3 4 5 6 7 8
처음 릴리즈의
약 40배
Major Release
What is API First?

8. 0
20
40
60
80
100
120
1 2 3 4 5 6 7 8
APIFirstDesign 설계의선순환
Release 별 생산성
What is API First?
처음 릴리즈의
약 40배

9. APIFirstDesign 설계의선순환
• 기능이 동작만 하면 아키텍처 개선 없이 다음 기능 구현
• 기능 변경: 복붙 + 일부 수정 => ‘향후 문제시 해결 카드’
• 공유 부족으로 소수의 개발 인력에 대한 의존도 높아짐
• 좋은 설계, 아키텍처 그리고 클린 코드에 주의를 기울어야 ....
아키텍처의 중요성
엉망진창의 징후
What is API First?

10. APIFirstDesign 설계의선순환
• 기능이 동작만 하면 아키텍처 개선 없이 다음 기능 구현
• 기능 변경: 복붙 + 일부 수정 => ‘향후 문제시 해결 카드’
• 공유 부족으로 소수의 개발 인력에 대한 의존도 높아짐
• 좋은 설계, 아키텍처 그리고 클린 코드에 주의를 기울어야 ....
아키텍처의 중요성
엉망진창의 징후
What is API First?

11. APIFirstDesign 설계의선순환
“ Big Ball of Mud ”
What is API First?

12. “the only way to go fast, is to go well”
생산성 저하와 비용증가를 뒤집을 수 있는 유일한 방법은
SW 아키텍처의 품질에 대해서 신중을 기하는 것.
APIFirstDesign 설계의선순환
SW 개발의 단순한 진리
What is API First?

13. API
API
API
Asrelease
Iteration
goesby..
API
“릴리즈가 증가 하게 될수록….
API는…”
API First Design 설계의
선순환
What is API First?

14. APIFirstDesign 설계의선순환
“ Big Ball of Mud ”
API
What is API First?

15. API First Design 설계의
선순환
API
Android
Web
App
Etc
IOS
릴리즈가 반복될수록…
클라이언트와의 의존도 증가
만약, 또 다른 클라이언트가
발생한다면..?
What is API First?

16. ?
API Etc
API First Design 설계의
선순환
What is API First?

17. /etc/....
API Etc
API First Design 설계의
선순환
What is API First?

18. APIFirstDesign 설계의선순환
API FIRST 란?
What is API First?

19. APIFirstDesign 설계의선순환
API FIRST 란?
서비스가 개발/ 통합/ 분리 시 endpoint 역할이 되는 API 을 개발 시
고려해야하는 우선순위 1순위 로 두는 것.
개발 시
우선순위 1위!API
What is API First?

20. API-First Design
APIFirstDesign 설계의선순환What is Design?

21. API-First Design
APIFirstDesign 설계의선순환What is Design?

22. What is Design?
Design is to design the design of a design
1 2 3 4
noun verb noun noun
- John Heskett
A general concept
of policy
An Activity A plan of
Intention
A finished outcome
(System, service or product)
APIFirstDesign 설계의선순환
[ ] ==
디자인 은 어떠한 개념을 브레인 스토밍,사고 또는 수정하는 과정 을
통하여 도출된 주제나 요구, 문제에 대한 답변을 해 나가며 완성됩니다.

23. What is Design?
Design is to design the design of a design
1 2 3 4
noun verb noun noun
- John Heskett
A general concept
of policy
An Activity A plan of
Intention
A finished outcome
(System, service or product)
APIFirstDesign 설계의선순환
[ ] ==“ 협업 프로세스 “
디자인 은 어떠한 개념을 브레인 스토밍,사고 또는 수정하는 과정 을
통하여 도출된 주제나 요구, 문제에 대한 답변을 해 나가며 완성됩니다.

24. API-First Design
APIFirstDesign 설계의선순환What is API First Design?
개발자들간에 API 을 우선순위로 두고 협업하여 설계하는 것.

25. 일반적인 우리의 개발 과정은?
APIFirstDesign 설계의선순환What is API First Design?

26. IMPL 1
Backend 개발팀
APIFirstDesign 설계의선순환What is API First Design?

27. IMPL 1
Backend 개발팀
APIFirstDesign 설계의선순환What is API First Design?
API 2

28. IMPL 1
Backend 개발팀
APIFirstDesign 설계의선순환What is API First Design?
API 2
SDK SDK SDK
Android IOS Client
3
Frontend 개발팀

29. IMPL 1
Backend 개발팀
APIFirstDesign 설계의선순환What is API First Design?
API 2
SDK SDK SDK
Android IOS Client
3
Frontend 개발팀
“동기식”

30. IMPL 1
Backend 개발팀
APIFirstDesign 설계의선순환What is API First Design?
API 2
SDK SDK SDK
Android IOS Client
3
Frontend 개발팀
문제점은 무엇일까?
1.Backend 개발자가 설계를 마칠 동안 Frontend 개발자는 기다려야 합니다.
2.설계 API 문서가 나왔지만, 명확하지 않을 수 있습니다.
3.기능, 버그, 개선 또는 변경이 필요한 경우 앞선 1,2,3 개발 과정이 반복되어 시간 낭비됩니다.
4.Time-in-market 시간이 길어집니다.

31. 그렇다면,
API ­ FIRST Design는 어떤 방식일까요?
APIFirstDesign 설계의선순환What is API First Design?

32. Backend 개발팀
APIFirstDesign 설계의선순환What is API First Design?
API
MOCK
Frontend 개발팀
API
MOCK
API
MOCK
1
“ 개발자들간에 API 을 우선순위로
두고 협업하여 설계하는 것. ”

33. Backend 개발팀
APIFirstDesign 설계의선순환What is API First Design?
API
MOCK
Frontend 개발팀
API
MOCK
API
MOCK
IMPL IMPL IMPL 2
1

34. Backend 개발팀
APIFirstDesign 설계의선순환What is API First Design?
API
MOCK
Frontend 개발팀
API
MOCK
API
MOCK
IMPL IMPL IMPL 2
1
SDK SDK SDK
Android IOS Client
3

35. Backend 개발팀
APIFirstDesign 설계의선순환What is API First Design?
API
MOCK
Frontend 개발팀
API
MOCK
API
MOCK
IMPL IMPL IMPL 2
1
SDK SDK SDK
Android IOS Client
3
“병렬식”

36. Backend 개발팀
APIFirstDesign 설계의선순환What is API First Design?
API
MOCK
Frontend 개발팀
API
MOCK
API
MOCK
IMPL IMPL IMPL 2
1
SDK SDK SDK
Android IOS Client
3
장점은 무엇일까?
1. Backend 개발자가 설계를 마칠 동안 Frontend 개발자는 기다려야 한다.
2. 설계 API 문서가 나왔지만, 명확하지 않을 수 있다.
3. 기능, 버그, 개선 또는 변경이 필요한 경우 앞선 1,2,3 개발 과정이 반복되어 시간 낭비된다.
4. Time-in-market 시간이 길어진다.
… 기다릴 필요가 없다.
… 명확하게 전달할 수 있다.
… 시간이 절약될 수 있다.
… 단축시킬 수 있다.

37. Backend 개발팀
APIFirstDesign 설계의선순환What is API First Design?
API
MOCK
Frontend 개발팀
API
MOCK
API
MOCK
IMPL IMPL IMPL 2
1
SDK SDK SDK
Android IOS Client
3

38. Server
API
MOCK
TEST
CODE
Client
TEST
CODE
APIFirstDesign 설계의선순환
TEST 관점에서의 API FIRST 개발은?
What is API First?

39. FEEDBACK
APIFirstDesign 설계의선순환What is API First?
Use / Try Build
Package
Deploy
TestDesign
API FIRST Design 개발 시나리오 및 도구들

40. APIFirstDesign 설계의선순환What is API First?
Swagger Codegen 을 활용한 API First 실천하기

41. Swagger.yml
APIFirstDesign 설계의선순환What is API First?
Swagger Codegen 을 활용한 API First 실천하기
https://github.com/slippStudy/moim/

42. APIFirstDesign 설계의선순환What is API First?
Swagger Codegen 을 활용한 API First 실천하기
: 서버단

43. APIFirstDesign 설계의선순환What is API First?
Swagger Codegen 을 활용한 API First 실천하기
: 클라이언트단

44. @OpanAPISpec @SwaggerCodegen @Daou_S/W_Labs @Design
Thank you
감사합니다.
• 다우기술 비즈 플랫폼팀 김 정규