외부 강연용 PPT입니다. 비전공 학원 교육생 대상으로 발표에 이용하였던 PPT이고, 세부적인 내용을 배제하였을때 약 3시간 정도 발표 시간이 나왔습니다. 원본은 Keynote이기 때문에 일부 틀어진 부분이 있을 수 있습니다.

1. 시소컴퍼니 안석현 CTO
웹/앱 기술 동향

3. 웹/앱 아키텍쳐

4. • 일반적인 웹 서비스 아키텍쳐 구
성
웹 아키텍쳐
웹
서
버
웹
애
플
리
케
이
션
서
버
DB
웹
클
라
이
언
트
앱
클
라
이
언
트

5. 운영체제

6. 운영체제
윈도우
리눅스
-레드햇
-CentOS
-우분투
기타 등등 다양한 배포판

8. 서버 배포

10. 서버 배포
서버의 구성
자체 구축
IDC
데이터센터를 통한 서버 운영
회선 임대 및 서버 설치 후 서비스 운영

13. 서버 배포
서버의 구성
클라우드
가상화 기술 기반
필요할때 서버를 빠르게 추가/제거 가능
서버 사이즈 유연성
사용한만큼 비용 지불

14. 컨테이너

19. 웹 서버

20. 웹 서버의 역할

22. 웹 서버 시장 점유율
• nginx의 성장세
• Apache의 꾸준한 수요
웹 서버

24. Nginx
• 비동기 이벤트 기반 구조
• apache는 요청당 프로세스/스레드 생성 및 처리
• 성능 & 경량화 등 이유로 Nginx 이용이 많아지는 추세

25. 웹 애플리케이션 서버(WAS)

26. 웹 애플리케이션 서버(WAS)
언어별 독자적 생태계
너무나 많은 프레임워크, 언어 등이 있어 모두를 이야기할수는 없습니다
.
주요 분야 및 그 환경에 따라 유행하는 프레임워크/언어를 소개합니다.

27. 웹 애플리케이션 서버(WAS)
SE&SI
• 정부 중심의 외주 기반 서비스들
• ’전자정부 프레임워크’가 존재하는 Java / Spring 프레임워크가 주류
• 이전에 비해서는 위상 약화
• Netflix 등 지속적으로 사용 서비스가 있음

29. 스타트업
• 신기술에 빠른 대응하는 편
• 빠른 구현이 중요
• python/django , node.js/express 등
• 마이크로서비스를 목적으로 프레임워
크의 도움 없이 이용하기도 함
• python의 경우, data science&ML에서
주요 도구로 사용됨.
• 최근에는 구글에서 개발한 Go 언어가
주목받고 있습니다.
웹 애플리케이션 서버
(WAS)

30. 모노리틱 VS 마이크로서비스
• 모노리틱
• 모든 기능을 단일 프로젝트에서 처리
• 하나가 문제가 되면 전체 서비스에 지장 가능
• 마이크로서비스
• 각각의 기능을 작은 단위로 분할 및 배포
• 특정한 부분에서 에러가 발생해도 서비스 전체가 중단되지 않음

32. DB

33. DB
SQL기반
• MySQL & MariaDB
• MSSQL
• PostgreSQL

34. DB
NOSQL
• 비SQL 기반 데이터베이스들을 통칭
• 큰 단위의 데이터를 다루는것에 적합
• SNS들, 게임 등에서 많이 사용함.

36. 웹 클라이언트

37. 웹 클라이언트
• 웹표준(HTML5 CSS3 JS) 기반의 환경의 보편화
• 플래시 미지원
• 자바스크립트 기반으로 제작

39. 주요 사용 기술
• 최근에도 JQuery등을 이용하여
DOM 조작 등을 시행함.
• AJAX-RESTful 등의 방식으로 비
동기적/실시간적으로 서버와 통신
• 직접 화면을 제어하기에는
JQuery만으로는 부족
웹 클라이언트

40. 웹 클라이언트 프레임워크

43. 웹에서도 앱에서 보이는것과 같은 모습을
보이고싶어!

44. 앱 개발

45. 게임같은 특수한 경우에는 게임 엔진을 이용하는 편입니다. (유니티/언리얼 등)
일반적인 앱 기준입니다.

46. IOS 개발환경
Objective C
Swift

47. Swift 쪽이 더 쓰기 편해요.

48. Android 개발환경
Java
Kotlin

49. 사실 코틀린을 공식 개발 언어로 추가한 이유는 따로 있지만…
마찬가지로 Kotlin쪽이 더 쓰기 편해요.

51. IOS / 안드로이드의 공동 개발
• C#
• Xamarin
• javascript(node.js)
• Angular 기반 -> Ionic
• React 기반 -> React Native
• Vue 기반 -> Vue
• Dart
• Flutter

52. 반드시 모든것을 앱으로 개발할 필요는 없습
니다.

53. • IOS/Android 앱
• 디바이스 종속적(카메라/푸시 등) 기능
• 네이티브로 개발
• 기타 상품페이지 등 기본 기능
• WebView(웹 브라우저)를 이용해 웹으로
개발
• 쿠팡같은 쇼핑몰
• 카카오톡 선물하기 기능
• 알게모르게 WebView를 많이 이용합니다.
하이브리드 앱

54. +a

55. • react-native-window
• 웹 클라이언트 프레임워크
• Electron 이용.
• Atom -> VS Code도 이걸로 만
듦
윈도우

56. • 구글이 차기 운영체제로 개발중
• 아직은 제한적
• 메인 개발 환경으로 Flutter 채용
퓨시아

57. 형상 관리

58. 복잡해 보이지만, 한마디로 소스코드 관리.

59. 형상관리
Git / SubVersion

61. CD/CI

62. 다 만들었는데,
귀찮게 이걸 내가 직접 서버에 올려야해?

63. 적당히 알아서 컨테이너에 넣고,
컨테이너 웹 서버에 올리고 해줬으면 좋겠는
데.

64. • 미리 설정해두면 알아서 컨테이너
에 담아서 서버에 올리고 배포하
고 해줍니다.
• 오픈소스로 제공되는 대표가
Jenkins
• 대체로 설치형 대신 Circle CI,
Github actions
• 상용 CD/CI 툴 사용하는 경향
CD/CI

67. Git 실습

68. 이제부터 이 폴더는 git으로 관리하겠습니다.
git init

69. 서버에 있는 파일을 가져옵니다
Git clone

70. 이 파일을 git으로 하는 관리에 추가합니다.
Git add

71. 이 내용으로 임시저장합니다.
Git commit -m “변경내용 설명”

72. 커밋한 내용을 서버로 보냅니다.
Git push

73. 서버 내용을 당겨옵니다.
Git pull

74. git의 핵심

75. 새 브랜치를 만듭니다.
Git branch

76. 다른 브렌치로 옮겨갑니다. 기존에 커밋된 브랜치 내용은 안지워져요.
Git checkout

77. 브랜치와 그 커밋을 하나로 합칩니다.
Git merge