안녕하세요, ROOMER의 CEO 김희원입니다. 비개발자로서 IT 스타트업에서 일하려면 알아야할 기초적인 지식을 같이 공부하기 위한 자료를 만들었는데요. 팀 내부 세미나용 자료지만, 다른 분들도 같이 보면 좋을 것 같다고 하여, 슬라이드 쉐어에 공개합니다. 스타트업을 포함, 업계에 계시는 비개발자 여러분들! 문풍당당하게 오늘도 파이팅하세요!! *참고도서 1: 비전공자를 위한 이해할 수 있는 IT지식 (최원영 저) *참고도서 2: IT 좀 아는 사람 (닐 메타 외 2 저)

1. 세미나01 | 비개발자를위한IT기본지식
김희원 | 2021.10.12
*참고도서:비전공자를위한이해할수있는IT지식
🐶🐱
문!풍!당!당!
을 위한 당당세미나

2. 온라인, IT기반의 회사에 일하는 비개발자 팀원들은
아마 이런 고민들을 하실 거에요
2

3. 문송하긴 하지만,
나는 개발자가 아닌데…
굳이 프로그래밍을 알아야 하나?
3
이해하고 싶긴 한데,
뭘 어떻게 해야 하지?
프로그래밍을 배워야 하나?
A B

4. 4
이 기사들을 100%로
읽고 이해할 수 있으세요?

5. 10년 뒤의 프로그래밍/IT지식
= 부모님 세대의 한자/한문
= 우리 세대의 English
5
A

6. 개발자가 아니라면 꼭 프로그래밍을 배울 필요는 없다
하지만 어떻게 돌아가는지는 꼭 알아둬야 한다
(적어도 ROOMER에서 같이 일하고 싶다면)
6
B

7. 문송한 나: 혹시 저번에 요청한 메인 배너 수정은 언제까지 될까요?
7
바쁜 개발자: 아~ 그거요? 그게 서버에서 이미지 URL을 보내줘야 하는데,
아직 API가 다 안 만들어졌나봐요. JSON에 메인 배너 URL이
빠져있네요… 일단 프론트 단에서는 URL이 안 오면 기본 값이
뜨게 해놨어요. 근데 그냥 제가 찾은 이미지를 넣은거라서 좀 이상하게
보일 거에요. 백 단에서 추가 개발이 완료됐는지 확인해보시면 좋을 거
같아요

8. 😳
8
(헐… 무슨 소리야…)

9. 이 세미나가 끝날 때 쯤에는
이런 표정😳을 짓지 않게 될 겁니다 :)
9

10. | 세미나 목차
1. 프로그래밍 언어와 OS
2. 클라이언트와 서버
3. API와 JSON
4. 애플리케이션
5. 웹
6. 데이터베이스
7. 프레임워크와 라이브러리
10

11. 01. 프로그래밍 언어와 OS
11
Programming Language & Operating System

12. 프로그래밍 언어
12

13. 컴퓨터 시스템을 구동시키는
소프트웨어를 작성하기 위한 형식 언어.
고급 언어일수록 사람이 사용하는 언어에 가깝다.
13
프로그래밍 언어

14. 컴파일러는 또 뭐람??
(모르는 걸 찾아보면, 또 모르는 게 나오는…)
14

15. 고수준 언어(사람 언어에 가까운 언어)로 쓰인 소스 코드를
저수준 언어(어셈블리어, 기계어 등)로 번역하는 프로그램
15
컴파일러

16. 프로그래밍 언어(고수준&저수준)와
컴파일러와의 관계!
16

17. 인간이 사용하는 언어에 가까운 프로그래밍 언어
(인간이 프로그래밍하기에 상대적으로 수월~)
17
고수준 언어
컴파일러
저수준 언어
컴파일러
기계어
번역기는 못 참지 ㅇㅇ
고수준 언어에 비해 기계어에 가까운 프로그래밍 언어
(이건 인간이 다루기에는 상대적으로 복잡&어렵~)
번역기 찬스 한 번 더!
101110 110001
(???: 이게 언어라고?)

18. 기계어는 뭐지??
18

19. 19
기계어는 전기적 신호를
1과 0의 이진법(Binary)으로
구성하여 만들어진 언어

20. 컴퓨터의 기본 구성 요소
20
컴퓨터의 두뇌로서 각종 연산을 처리함
중앙처리장치
(CPU)
주기억장치
(Memory)
보조기억장치
(HDD/SDD)
CPU를 보조하면서, 프로그램을 로딩하거나
데이터를 임시 저장하는 데에 쓰임.
입출력장치와 데이터를 주고 받음.
데이터가 반영구적으로 보관되는 곳

21. 21
대략 이렇습니다
(그렇게 중요한 건 아니니 적당히 pass)

22. 컴퓨터(PC, 스마트폰, 태블릿 등)를 사용하기 위해서 필요한
각종 소프트웨어를 실행할 수 있는 시스템
OS
(운영 체제. Operation System)
22

23. 23
얘네들이 다 OS에요
(익숙한 애들도 있고, 아닌 애들도 있고…)

24. 24
스마트폰 PC 서버
얘네 둘은 그냥 이름만 아는 걸로…

25. 프로그래밍 언어를 활용해,
운영체제 위에서 구동하는 프로그램을 만드는 사람들
25
결국 ‘개발자’란…

26. 02. 클라이언트와 서버
26
Client & Server

27. 27
😳
😳

28. 카톡 메시지는 어떤 방식으로 상대방에게 전달될까?
28

29. 29
빡구의 아이폰 민희의 아이폰
오빠가 큰맘 먹구 민희한테 쏜다!!

30. 30
빡구의 아이폰 민희의 아이폰
오빠가 큰맘 먹구 민희한테 쏜다!!
이렇게 가는 거 아닙니다

31. 31
빡구의 아이폰 민희의 아이폰
오빠가 큰맘 먹구 민희한테 쏜다!! 오빠가 큰맘 먹구 민희한테 쏜다!!
1
카카오톡 컴퓨터
보내고 2 받고

32. 32
빡구의 아이폰 민희의 아이폰
오빠가 큰맘 먹구 민희한테 쏜다!! 오빠가 큰맘 먹구 민희한테 쏜다!!
1
카카오톡 컴퓨터
=> 서버
보내고 2 받고
아이폰
=> 클라이언트

33. 33
클라이언트
(손님)
서버
(종업원)
서버에게 데이터나 파일을
달라고 요청하는 컴퓨터
클라이언트의 요청에 따라
데이터나 파일을 제공하는 컴퓨터
데스크탑, 스마트폰, 태블릿 등 서버 컴퓨터, IDC (개인 데스크탑도 가능)
(다르게 부르면)
=프론트엔드/프론트/클라
(다르게 부르면)
=백/백엔드

34. 서버는 클라이언트의 요청에 따라
데이터나 파일을 제공하는 컴퓨터
34

35. 서버가 컴퓨터(하드웨어)라면
당연히 OS(소프트웨어)도 필요하다
35

36. 36
스마트폰 PC 서버

37. 37
스마트폰 PC 서버
리눅스와 우분투는 무료라서 자주 쓰이는데,
서버 개발할 때, 유료 OS를 쓰는 경우도 있다!

38. 03. API와 JSON
38
Application Programming Interface &
JavaScript Object Notation

39. 39
“회원가입 시켜줘”
“내 프로필 사진 바꿔줘”
“민희한테 보낸 메시지 삭제해줘”
카카오톡 서버
빡구의 아이폰
요청 & 응답
아, 뭐가 이리
많고 복잡해!!

40. 40
“회원가입 시켜줘”
“내 프로필 사진 바꿔줘”
“민희한테 보낸 메시지 삭제해줘”
“요청이 이것저것 많네…
정리 한번 해야 하긋다!!”
카카오톡 서버
빡구의 아이폰
요청 & 응답

41. 41
“회원가입 시켜줘”
“내 프로필 사진 바꿔줘”
“민희한테 보낸 메시지 삭제해줘”
회원 가입할 때 요청 보내는 곳
프로필 이미지 요청 보내는 곳
메시지 요청 보내는 곳
카카오톡 서버
빡구의 아이폰
요청 & 응답
API

42. 응용 프로그램에서 사용할 수 있도록,
운영 체제나 프로그래밍 언어가 제공하는 기능을
제어할 수 있게 만든 인터페이스
42
API (Application Programming Interface)

43. (단순하게)
클라이언트 컴퓨터가 서버 컴퓨터에 요청을 할 때,
그 요청을 구분하는 체계
43
API (Application Programming Interface)

44. 44
02_데이터 API
01_기능 API 03_하드웨어 API
예시) 모바일 결제 기능 예시) 날씨 데이터 예시) 스마트폰 카메라

45. 45
올려줘 (Create)
불러와줘 (Read)
바꿔줘 (Update)
지워줘 (Delete)
인스타그램
인스타그램 서버
빡구의 아이폰
“타임라인에 사진을…”
POST
GET
PUT(전체) / PATCH(부분)
DELETE

46. 46
올려줘 (Create)
불러와줘 (Read)
바꿔줘 (Update)
지워줘 (Delete)
인스타그램
인스타그램 서버
빡구의 아이폰
“타임라인에 사진을…”
POST
GET
PUT(전체) / PATCH(부분)
DELETE
메소드 (함수)

47. 개발자느님: ‘메소드'가 어쩌고… ‘파라미터’가 저쩌고…
47
문송한 나: 메소드?? 파라미터?? (아… 무슨 소리지ㅠㅠ)

48. 48
메소드 (함수)
POST - 올리기
GET - 불러오기
PUT(전체) / PATCH(부분) - 바꾸기
DELETE - 삭제하기
파라미터 (요청 변수)
예를 들면,
회원가입할 때 - 전화 번호, 이름
로그인할 때 - ID&PW

49. 특정 소프트웨어에 API를 제공하여
해당 소프트웨어의 개발을 도와주는
별도의 소프트웨어 도구
49
SDK (Software Development Kit)

50. API를 통해서, 클라이언트가 서버에 데이터 요청할 때,
현재 가장 많이 쓰이는 형식
(개발자들이 얘기할 때 많이 나오는 말이니까 알아만두자!)
50
JSON (JavaScript Object Notation)

51. “아까 얘기한 정보는 JSON으로 보냈어요”
“로그인 API 응답 보낼 때,
JSON 안에 넣어서 같이 보낼게요”
“지도 API는 JSON으로 보내는 걸로 처리했어요”
51
개발 팀원한테
가끔 들리는 말들

52. 52
클라이언트와 서버는 API를 통해 요청과 응답을 주고 받고,
그때 필요한 데이터들은 JSON 형식으로 주고 받는게 국룰!

53. 04. 애플리케이션
53
Application

54. 우리는 자원(사람, 돈, 시간 등)이 부족하잖아…
안드로이드와 iOS 앱 중에 뭘 먼저 개발할까?
54

55. 앱 승인을 잘 해줌
(시간이 빠르고 편하다)
But, 지침에 어긋난 게 걸리면
가차 없이 삭제해버림
(당해봤는데, 진짜 빡칩니다…)
55
앱 승인이 까다로움
(시간이 오래 걸리고 귀찮다)
But, 구글플레이에 비해서
유연하다
(미리 경고하기 때문에)
vs

56. 물론 이것보다 더 중요한 건,
목표 사용자 집단이 어떤 OS를 더 쓰는지!
(예컨대 20대 여성이 타겟이라면 iOS 앱을 개발)
56

57. 05. 웹
57
Web

58. 웹페이지를 개발할 때에는
다음의 3가지가 필요합니다
58

59. HTML - 문자, 이미지 등의 정보 제공
CSS - 이미지 등을 활용한 디자인
JavaScript - 프로그래밍을 활용한 기능 개발
59

60. 60
CSS 삭제된 네이버 네이버 검색어 자동 완성 기능
HTML만 있는 상태 HTML & CSS JavaScript

61. HTML - 문자, 이미지 등의 정보 제공
CSS - 이미지 등을 활용한 디자인
JavaScript - 프로그래밍을 활용한 기능 개발
61
프로그래밍 언어 x
프로그래밍 언어 x
프로그래밍 언어 O

62. HTML이랑 CSS 개발자는 프로그래머가 아니라고?
그럼 뭐라고 불러야 되지??
62

63. HTML와 CSS를 활용하여 웹페이지를 구현하는 개발 작업
이를 전문으로 하는 사람들을 ‘퍼블리셔’라고 함
(HTML과 CSS는 프로그래밍 언어가 아니기 때문에, 엄밀히 따져서 프로그래머가 아니다)
63
퍼블리싱 (Publishing)

64. 64
웹
앱
(1) 코드 수정 및 개선
(2) 마켓에 업로드 (모바일 앱)
서버에 업로드 (데스크탑)
(3) 사용자들이 앱 버전 업데이트
(업데이트 안하고 예전 버전 쓰는 사람이 많다)
(4) 변경 완료
(1) 코드 수정 및 개선
(2) 원본 파일을 수정된 파일로 교체
(3) 변경 완료
vs

65. 65
웹
앱
(1) 코드 수정 및 개선
(2) 마켓에 업로드 (모바일 앱)
서버에 업로드 (데스크탑)
(3) 사용자들이 앱 버전 업데이트
(업데이트 안하고 예전 버전 쓰는 사람이 많다)
(4) 변경 완료
(1) 코드 수정 및 개선
(2) 원본 파일을 수정된 파일로 교체
(3) 변경 완료
vs
이렇게 보면 Web으로 서비스 개발하는 게 나을 거 같지만,
Web이 아닌 APP으로 개발하면 스마트폰의 기능을
훨씬 자유롭고 깊이있게 사용할 수 있다

66. 66
모바일 웹
네이티브 앱
vs
하이브리드 앱
vs
Web의 요소가 없이
APP으로만 개발된 APP
모바일 브라우저로
사용하는 Web서비스
Web의 요소를 부분적으로
사용해서 개발한 APP

67. 서비스를 기획하고 개발할 때,
서비스의 특성과 사용자의 편의, 시장 상황, 보유 자원(인적, 물적)
등을 고려해서 어떤 방식으로 개발할지 신중히 결정하기
67
(특히 초기 스타트업일수록 선택과 집중이 필요하기에!!)

68. 06. 데이터베이스
68
Database

69. 키(key)와 값(value)들의 간단한 관계를 테이블화시킨
매우 간단한 원칙의 전산정보
데이터베이스이다
69
관계형 데이터베이스 (Relational Database)

70. 역대 모든 K-pop 아이돌 멤버들의
자산 현황을 월별로 정리하겠다
70
덕!풍!당!당!
👩🎤👨🎤

71. 71
랩몬스터(BTS) - 2015년 8월
랩몬스터(BTS) - 2021년 6월
랩몬스터(BTS) - 2021년 7월
랩몬스터(BTS) - 2021년 8월
랩몬스터(BTS) - 2021년 9월
부동산: 0억 / 주식: 0억 / 기타: 0.03억
부동산: 23억 / 주식: 40억 / 기타: 3억
부동산: 25억 / 주식: 41억 / 기타: 2억
부동산: 25억 / 주식: 44억 / 기타: 1억
부동산: 28억 / 주식: 41억 / 기타: 5억
문서번호 001
문서번호 xxx
문서번호 xxx
문서번호 xxx
문서번호 xxx

72. 랩몬(BTS) - 2021년 랩몬(BTS) - 2020년 랩몬(BTS) - 2019년
72
지민(BTS) - 2021년 지민(BTS) - 2020년 지민(BTS) - 2019년
뷔(BTS) - 2021년 뷔(BTS) - 2020년 뷔(BTS) - 2019년
정국(BTS) - 2021년 정국(BTS) - 2020년 정국(BTS) - 2019년
제이홉(BTS) - 2021년 제이홉(BTS) - 2020년 제이홉(BTS) - 2019년

73. BTS - 2021년
트와이스 - 2021년
블랙핑크 - 2021년
몬스타엑스 - 2021년
73
BTS - 2020년 BTS - 2019년
트와이스 - 2020년 트와이스 - 2019년
블랙핑크 - 2020년 블랙핑크 - 2019년
몬스타엑스 - 2020년 몬스타엑스 - 2019년
서태지 - 2021년 서태지 - 2020년 서태지 - 2019년

74. [문제 상황]
뭐?? 우리 ‘랩몬스터’ 오빠가 ‘RM’으로 이름을 바꿨다고??!!
그 많은 문서에 있는 이름은 언제 다 바꿔ㅠ
74
🤯🤯

75. 효율적이고 체계적이고 쉬운 데이터 관리를 위해
대부분의 개발자가 관계형 데이터베이스를 사용한다
75

76. 76
번호 이름 역할 소속 팀 성별
K0001 RM 랩 BTS 남
K0002 지민 메인보컬 BTS 남
K0003 뷔 보컬 BTS 남
K0004 제이홉 보컬 BTS 남
K0005 슈가 보컬 BTS 남
K0006 나연 랩 트와이스 여
K0007 쯔위 메인보컬 트와이스 여
K0008 사나 보컬 트와이스 여
K0009 모모 보컬 트와이스 여
K0010 다현 보컬 트와이스 여
K0011 로제 랩 블랙핑크 여
K0012 지수 메인보컬 블랙핑크 여
K0013 제니 보컬 블랙핑크 여
K0014 리사 보컬 블랙핑크 여
Column(열) = Field
Row(행)
=Record
Value(값)

77. 멤버번호 이름 역할 소속 팀 성별
K0001 RM 랩 T001 남
K0002 지민 메인보컬 T001 남
K0003 뷔 보컬 T001 남
K0004 제이홉 보컬 T001 남
K0005 슈가 보컬 T001 남
K0006 나연 랩 T002 여
K0007 쯔위 메인보컬 T002 여
K0008 사나 보컬 T002 여
K0009 모모 보컬 T002 여
K0010 다현 보컬 T002 여
K0011 로제 랩 T003 여
K0012 지수 메인보컬 T003 여
K0013 제니 보컬 T003 여
77
팀 번호 소속팀 구성원 소속사
T001 BTS 7 하이브
T002 트와이스 7 JYP
T003 블랙핑크 4 YG
번호 부동산 평가액 주식 보유액 기타 금액
K0001 2채 20억 5만주 31억 예금 2억
K0002 1채 21억 2만주 11억 예금 12억
K0003 1채 39억 3만주 21억 예금 6억
K0004 5채 59억 1만주 3억 예금 1억
Primary Key Key
Foreign Key
Primary Key
자산 테이블
소속팀 테이블
멤버 테이블
[데이터베이스(or 스키마)] 역대 K-아이돌 월별 자산 현황

78. 서버 개발자들과 얘기하다보면 키(key), 키 값(key value),
필드(field) 등 RDB와 관련된 용어를 많이 사용합니다
78
1
2
문풍당당한 비개발자들도, 엑셀이나 스프레드시트 등으로
데이터 관리를 할 때, RDB의 개념을 활용하면 더욱 편리하게
데이터를 관리할 수 있습니다

79. 그럼 데이터(데이터베이스)는 무조건 서버에 있겠네??
79

80. NO!
데이터베이스(DB)는 서버에만 있는 것이 아니다!
80

81. 81
[부르는 방법]
로컬
로컬DB
네이티브
클라이언트
프론트/프론트엔드
[부르는 방법]
서버
API 요청
(그냥) DB
백/백엔드
알람 앱의 알람 시간처럼
서버가 아닌 곳에도
데이터베이스가 있습니다
알람 앱 인스타그램

82. 82
1
2
3
4 5
[질문]
우측 화면의 이미지 데이터들은
로컬 or 서버 중 어디에 있을까?

83. 83
1
2
3
4 5
[답]
(대략적인 것은 파악할 수 있지만)
정확한 것은 API 문서를 보거나
개발자에게 확인해야 알 수 있다

84. 07. 프레임워크와 라이브러리
84
Framework & Library

85. ‘치킨 집을 하나 차리고 싶은데…’
85

86. 86
‘역시 프랜차이즈로 시작하는 게 편하지!!’

87. 87
✓ 원재료(치킨 등) 수급
✓ 매장 인테리어
✓ 광고 및 홍보
✓ POS등 결제 관리
✓ 치킨 메뉴 개발
치킨 집 창업하기 서비스 개발하기
✓ 메뉴 버튼 개발
✓ 하단 네비게이션 개발
✓ UI화면 전체 개발
✓ 기타 요소 개발
프로그래밍 개발에도 ‘프랜차이즈’가 필요하다

88. 프로그래밍 계의 프랜차이즈,
프레임워크(Framework)
88

89. 89
프로그래밍 언어 프레임워크, 라이브러리
Cocoa
Android
Framework
Swift
JavaScript
React Angular.js

90. 90
서버 프로그래밍 언어 프레임워크, 라이브러리

91. 위의 프로그래밍 언어와 프레임워크, 라이브러리는
용어만 알아둬도 현업에서 많은 도움이 됩니다
(아예 모르는 것보다는 훨씬 낫거든요 😂)
91

92. 이 자료를 만들기 위해서 아래의 도서들을 많이 참고했습니다!
따로 구매/대여해서 보시길 추천드립니다!!
92
비전공자를 위한
이해할 수 있는 IT지식
- 최원영
IT 좀 아는 사람
- 닐 메타 외 2
강추

93. 간단하게 저희 소개 좀 할게요
93

94. 저희는
94
입니다

95. 95
내 목소리로 관심 지역의 사람들과 대화하는 지역 소셜 플랫폼을 만들어요!

96. 저희 팀에 관심이 있다면, 이 글을 클릭하세요!
더 궁금하시다면 이메일로 편하게 연락주세요!
당신의 이야기가 궁금합니다 😉
96

97. 97
김희원 CEO
ROOMER Inc. | (주)루머
heewon@roomer.cool
www.roomer.cool
가까운사람과이어지고,새로운사람을만나는방식을바꿉니다
우리나라뿐아니라,전세계적으로!
ROOMER에 대해 궁금하다면 클릭👆