[D2 CAMPUS PARTNER] 연합동아리 NEXTERS에서 진행한 안드로이드 오픈소스 스터디 자료 입니다.

1. 1
NEXTERS 4주차.
직군 교차 세션.
대체 불가능의 디자이너가 되는 법.
8기 개발자 권기호.

2. 2
목차
1. 개발자와 소통하기- 서버,클라이언트………………………………………………………………………………………..3
소프트웨어와 하드웨여………………………………………………………………………………………………………………3
2. Android-animation……………………………………………………………………………………………………………………..5
3. HTML………………………………………………………………………………………………………………..…………………………7
필수 HTML Tag……………………………………………………………………………………………………..……………………9
HTML 마무리……………………………………………………………………………………………………………………………..15
4. 프로그래밍 언어…………………………………………………….……………………………………..……………………………16
C……...………………………………………………………………………………………………………………………………………….16
C++…………………………………………………………………………………………………………………………………………….17
C#………………………………………………………………………………………………………………….……………………………17
Object-C...……………………………………………………………………………………………………………………………………18
Java……………………………………………………………………………………………………………….…………………………….18
5. 마치며…………………………………………………………………………………………………………………………………………19

3. 3
개발자와 소통하기
서버 , 클라이언트
개발자들이 서버 , 클라이언트에 대하여 논하면 디자이너분들은 “어디에 서버를 이용하고
어디엔 서버를 이용하지 않으며 어떤 것을 클라이언트라 부르지?”라는 의문을 갖고 있으실거라
생각됩니다.
서버-클라이언트는 우리가 즐겨 하는 마피아 게임과 비슷합니다. 마피아 게임이 진행되기 위해선
사회자가 반드시 필요합니다. 마피아 게임에서의 사회자 역할은 마피아의 살인 요청을
받아들이고 해당하는 사람을 죽이기도 하며 의사의 요청에 죽을 운명이였던 사람이 “유능한
의사에 의해 살아났습니다”라는 응답을 받을 수 있습니다. 이처럼 클라이언트는 요청을 하는
주체이며 서버는 응답을 해주는 주체입니다.
클라이언트는 우리의 서비스를 제공받은 사용자들을 클라이언트라 부르기도 하고, 사용자가
서비스를 이용하는 환경(Android , iOS , Web-Chrome,safari)를 말하기도 합니다. 아! 클라이언트를
개발하는 개발자들은 프론트엔드 개발자라 부릅니다. 서버를 개발하는 개발자는 백엔드 개발자라
부르죠 ㅎㅎ
클라이언트들이 서로 이야기(카톡처럼 메시지를 주고 받는 등)를 하기 위해서는 서버가
필요한데요. 서버는 클라이언트들이 전송하기를 원하는 메시지를 전달해주는 등 많은 역할을
합니다.
서버는 생각보다 어렵지 않습니다. 서버는 “내가 만드는 프로그램이 다른 디바이스로
연동( 안드로이드 환경에서 사용하다가 아이폰으로 변경할 시 데이터를 그대로 사용할 때)하거나
다른 디바이스와 메시지를 주고 받는 프로그램( 카카오톡 , 라인 )을 만들 때 서버가 필요합니다.
이와 같이 서버는 “남들과 소통하기 위해서 꼭 필요한 존재”라고 생각하시면 쉬울 듯 하네요! (서
버는 모든 프로그래밍 언어로 만들 수 있습니다.)
소프트웨어와 하드웨어
방금 말씀드린 것 처럼 개발자는 백 엔드 개발자와 프론트엔드 개발자로 나눌 수 있습니다. 하
지만 이 분류는 소프트웨어 직군에서만 나눌 수 있다는 것이 한계죠. 소프트웨어와 하드웨어는
불리어지는 이름에서조차 차이가 있는 것을 알 수 있습니다. 하드웨어는 딱딱하고, 변경이 불가능
할 것 같은 느낌이고 소프트웨어는 연하고, 변경이 쉬울 것 같고 안락한 느낌을 줍니다(여러분도
그렇죠?)
하드웨어는 말 그대로 딱딱한 것 소프트웨어는 부드러움이 연상되죠? 요즘 시대엔 모두들 외장하
드를 많이 들고 다니죠. 이렇게 하드웨어는 딱 봐도 딱딱한 반면 소프트웨어는 들고 다니는 사람
이 없습니다.. 오히려 하드라는 하드웨어 속에 하나의 프로그램으로써 존재하죠. 즉. 하드웨어는
컴퓨터 본체, 하드 디스크 모니터 등등 실제적으로 사람이 볼 수 있는 물체를 뜻합니다. 소프트웨

4. 4
어는 하드웨어 속에 존재하는 프로그램이며, 그 프로그램을 포토샵, 한글, 워드, 스케치라 부르기
도 하며 사람이 눈으로 실체를 볼 수 없죠.
그럼 이 둘이 어떻게 상호작용을 할까요? 여기에 많이 사용되는 것이 OS라는 소프트웨어입니다.
여러분도 많이 알고 있는 Mac, Window같은 운영체제를 OS(Operating System)라 부릅니다. OS는
소프트웨어이면서도 하드웨어와 직접적으로 연관이 있습니다. ( 라즈베리파이와 같은 제품에 우린
Linux OS를 설치하여 사용하죠!)
예를 들어보면 삼성 갤럭시와 같은 안드로이드 기기들은 스마트폰이라는 하드웨어에 Android OS
가 장착됨으로써 사용자들이 앱을 사용할 수 있도록 도와주죠!
추가설명 -!
여기서 조금 깊게 나간다면 Android는 Linux라는 OS를 조금 변경하여 만든 OS입니다. 여기서!
새로 등장한 Linux!! 어렵지 않습니다! Linux는 전 세계적으로 널리 이용하는 OS로써 Linux를 만든
모든 설계도와 코드등이 제공이 되어 어떤 사람이든 무료로 사용 가능한 OS를 이야기합니다.
리눅스에 접속한 모습.
또한 리눅스는 어디 어느 장소에 있든 아이디와 패스워드만 있다면 접속이 가능합니다. 이 말은
무슨 말일까요?
협업을 할 당시 개발자들은 “서버가 필요합니다~~ 주저리”하면서 이야기를 하곤 하죠. 이 말은
개발자들이 서버를 소유하고 있다는 뜻인데. 직접적으로 개인적으론 서버를 갖고있는 경우는 별
로 없습니다. 아! 제가 여기서 말하는 서버는 직접적으로 볼 수 있는 하드웨어에 장착된 서버를
뜻합니다. 그렇기 때문에 서버를 유료로 제공해주는 회사에 돈을 지불하고 서버를 대여해서 사용
합니다. 그렇기 때문에 어느 개발자라도 한 서버에 접속이 가능한 것이죠! 이해가 가시나요~?

5. 5
Android – Animation
개발자들도 애니메이션이 매우 중요하다고 생각합니다. 하지만 ‘서비스 핵심 기능’이 우선이기
때문에 애니메이션과 같은 부가적인, 시각적인 부분은 가장 마지막에 적용하게 되죠. 그래서 협업
시 정해진 기간 내에 구현 가능한 기능들을 확인하고, 어떤 기능을 구현할지 ‘결정’하는 것이 매
우 중요합니다. 또한 과도한 애니메이션 사용은 한 여름의 손난로가 되어버리는 현상을 보실 수
있습니다.
Animation를 구현하기 위해선 크게 두 가지의 방법이 있습니다.
1. xml 라는 프로그래밍 언어를 이용하여 직접 창조주가 되어 생명을 불어 넣어준다.
여기에서 소개해 드릴 애니메이션은 가장 유명한 Tween Animation라는 이름을 갖고 있는 애니
메이션입니다. 특정한 버튼, 이미지가 움직이고, 사라지고, 커지거나 작아지거나, 위치가 바뀌는 애
니메이션을 구현할 수 있습니다.
각 애니메이션마다 개발자가 설정해줘야 하는 값들이 있는데요. 디자이너들도 어떤 값들이 있
는지만 알면 해당 애니메이션들의 구현 가능한지 알 수 있을 듯 합니다.
아! 이제부터 나오는 ‘< >’ 꺽쇠, 이놈은 태그라 부릅니다.
<alpha> - 특정 버튼, 이미지, 텍스트와 같은 뷰를 점점 투명해져서 없어지도록 할 수 있는 애니
메이션입니다.
Duration 지속시간. 1000이 1초. toAlpha 애니메이션이 끝날 때 투명도
fromAlpha 애니메이션이 시작할
때투명도 값. 0.0~1.0
startOffset 애니메이션이 시작되기 전 대기시간
repeatCount 애니메이션 반복 횟수
(-1은 무한반복)
Interplator 애니메이션이 빠르게 진행되거나 느리
게 진행되도록 설정하는 값.
<rotate> - 회전을 할 수 있는 애니메이션입니다.
fromDegrees 시작하는 회전 각도 toDegrees 끝의 회전각도
pivotX 회전축의 X좌표 pivotY 회전축의 Y좌표
<scale> - 크기를 변경할 수 있는 애니메이션입니다.
fromXScale 가로의 크기. 1.0은 원래의값 fromYScale 세로의 크기. 1.0은 원래 크기의
값.
pivotX 크기를 변경할 때 중심의 좌표. pivotY Y좌표이며 왼쪽과 같아요~
toXScale 끝의 가로 크기. 2.0로 지정하면
2배로 커집니다.
toYScale 왼쪽과 같고, 세로로 커집니다.

6. 6
<translate> - 위치를 변경할 때 사용하는 애니메이션입니다.
fromXDelta 애니메이션의 시작 X
위치
fromYDelta 애니메이션 시작 Y위
치
toXDelta 끝날 때 X위치. toYDelta 끝날 때 Y의 위치.
이렇게 크게 4가지의 애니메이션이 있습니다. 이 애니메이션들만 다 외우고 있다면 눈을 내리
게 할 수도 있습니다. 그럼 말 나온 김에 눈이 내리는 애니메이션을 구성해 볼까요?
해당하는 애니메이션들을 엮어주기 위해선 <set>이라는 태그를 사용하면 됩니다. 전 처음에 이
애니메이션들을 어떻게 엮어줘야 하나 많이 막막했었는데요. 개발자들이 피하고 싶은 순간이기도
합니다.
<set>
<translate < - 이 translate는 왼쪽,오른쪽을 왔다리~ 갔다리~ 하는 역할을 하도록
~~~~/> 시켜줍니다.
<translate <- translate는 위,아래로 이동하는 애니메이션을 줍니다.
~~~/>
<rotate <- 이 rotate에는 눈덩이가 데굴데굴 구르면서 내릴 수 있도록
~~~~/> 설정해줍니다.
</set>
이와 같이 간단한 translate 태그 2개와 rotate태그를 이용하여 눈덩이 1개의 애니메이션을 작성
할 수 있습니다.
만약 눈덩이가 10개이상 내려야 하는 애니메이션이 필요하다면… 이와 같은 코드가 10개가 필
요하고 각각 움직이는 각도와 위치 값들이 다른 애니메이션들과 달라야 하겠죠? 핸드폰이 손난로
처럼 변하는 경우가 이런 경우입니다~!!ㅎㅎ (이런경우 gif로 만들어 주세요~ 그럼 좋음..)
2. Github(개발자들의 협업 프로그램)에서 열심히 찾거나 Stackoveflow(전 세계 개발자
들에게 엄청 유명한 개발 커뮤니티)에서 누가 만들어놓은 애니메이션을 찾는다.
이 부분은 정말 ‘검색 키워드’가 생명입니다. 키워드를 정말 잘 선택해서 검색 결과가 나온다면
유레카를 외칠 수 있지만, 나오지 않는다면 개발자는 체감상 “여자친구” 혹은 “남자친구” 프로그
램을 만드는 것과 비슷하게 체감할 것입니다. 그래서! 많은 애니메이션이 잘 정리되어 있는 주소
를 첨부합니다. 개발영역은 일년 사이에 강산이 바뀔정도로 많이 바뀝니다. 그렇기 때문에 오랜
기간은 아니고 이번 활동에서만큼은 디자이너 분이 원하는 애니메이션이 이 주소에 있다면 요구
하시고 없으면 개발자를 조금 이해해주시면 감사하겠습니다. -
https://github.com/wasabeef/awesome-android-ui

7. 7
HTML
Q. 웹 개발자들이 협업하고 싶은 디자이너 1 위가 어떤 디자이너인지 아시나요 ?
A. 웹 개발자들이 협업하고 싶은 디자이너 1 위는 “웹 화면(View)을 직접 코딩하여 만들 수 있는”
디자이너입니다. 몇몇 HTML 을 배워보신 디자이너 분들은 아시겠지만 HTML 은 간단하지만 매우
노가다성인 코드를 만드는 프로그래밍 언어입니다. 개발자들은 정확한 위치에 정확한
컴포넌트들을 배치하고 싶은 디자이너들의 마음을 이해는 하지만 상당히 어려운 일입니다.
하지만 매와 같은 디자이너의 눈을 피해가는 것은 어렵고 그렇기 때문에 디자이너 분들께 금방
흠이 잡히곤 하죠. 그러므로!! 디자인 감각이 전~~혀 없는 개발자는 기능 구현이나 하라고
던져놓고~! 스스로가 대체 불가능한 디자이너가 되어봅시다!
수채화를 그리기 위해선 물이 필요하며 유채화(유화)를 그리기 위해선 기름으로 갠 물감이
필요하죠? 미술에도 이런 규칙이 있듯이 HTML 에도 3 가지의 기본적인 규칙이 있습니다.
첫 번째 규칙은 <html> 와 같이 태그가 시작되면 </html>와 같이 종료 태그가 있어야 한다는
것 이죠~!! 두 개를 하나의 태그 세트라고 생각하시면 편합니다~!!ㅎㅎ
두 번째 규칙은 HTML 은 다음 4 개의 태그를 모두 이용해야 한다는 것입니다.
<html> <head> <title> <body>
이 태그들은 순서가 중요한데요, <html> <head> <title> </title> </head> <body>
</body> </html> 와 같이 순서를 갖게 됩니다. (* 오른쪽의 코드 참고) 첫 번째 규칙을
지키고 있는 게 보이시죠?
이 태그들은 다음의 역할을 합니다.
 <html> 문서의 시작과 끝을 알립니다.
 <head> 머리 영역으로 본문에는 이 내용이 표시되지 않고, <title>에 작성한 글만 브라우저에
표시됩니다.
 <title> 상단의 제목바에 표시됨
 <body> 본문 영역입니다. 이 태그 속에 작성하는 내용은 모두 화면에 나옵니다.
세 번째 규칙은 비슷한 성격의 서비스 혹은 UI 스타일 이라고 생각하시는 부분들을
<div>~</div>태그로 묶어주는 것 입니다. (세 번째 규칙은 개발자들간의 암묵적인 규칙입니다.)
또한 div 로 묶어준 부분들은 사용자의 마우스 클릭이나, 마우스를 해당 컴포넌트에 올려놓는 등~
특정한 시점에 특정한 기능(알람창을 보여준다든지~ 글자의 색을 변경한다든지~)를 처리할 수
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
[html 코드 순
서]

8. 8
있습니다. 또한 div 로 나눈 영역을 하나의 영역으로 생각하여, CSS3 를 이용하여 이 영역들의
위치를 설정하기도 하죠.
간단하게 이루어져 있는 구글 홈페이지를 예를 들어봅시다.
1 영역 같은 경우는 5 개의 일렬로 된 아이콘을 div 로 묶었습니다.
3 영역은 구글 로고.
4 영역은 검색바.
5 영역은 서비스 버튼 2 개가 있습니다.
2 영역은 3, 4, 5 영역을 묶었습니다.
1 영역은 5 개의 아이콘을 묶음으로써 만약 아이콘의 위치가 변경이 된다면, 5 개의 아이콘을
동시에 배치를 변경할 수 있습니다.
2 영역은 3,4,5 영역을 묶음으로써 3,4,5 를 품앗이 해주는 어머니의 역할을 맡게 됩니다. 이제부터
3,4,5 의 위치는 2 영역으로부터 조절해야 하며 margin 값 혹은 padding 값은 2 영역을 이용하여
설정하게 됩니다. 적용시킨 예로는 브라우저의 크기를 크게 하거나 작게 리사이즈 할 경우 그에
맞게끔 컴포넌트들이 중앙으로 배치됩니다.

9. 9
필수 HTML tag
이렇게 컴포넌트들을 배치하려고 해도, 막상 사용할 수 있는 태그들이 있어야 화면상에 표시를
하고 div 태그로 묶을 수 있겠지요. 그럼 프로젝트에서 꼭 사용되는 태그들과 하나의 프로젝트를
진행할 수 있는 태그들만 가볍게 알아봅시다! 앞으로 태그를 설명하면서 “속성”라는 말을 많이
사용하고, 속성에 대해서도 조금씩 다룰 예정인데, 다들 생소하실 것 같네요.
태그의 “속성”이란 해당 태그를 도와주는 어시던트 역할을 합니다. 의사가 수술을 할 때
어시던트의 도움이 있어야지 안전하게 수술을 할 수 있는 것과 같이 태그의 넓이를 넓히거나,
줄이거나 높이를 넓히거나 줄이거나, 사용자가 텍스트를 입력할 때 힌트를 준다든지, 많은 종류의
속성이 있습니다. 앞으로 태그와 그 태그에 사용되는 속성들을 설명해드리죠!
요즘은 디자이너분들이 사용할 수 있는 HTML 개발 프로그램들이 많이 제공되는데요. 저는
w3schools 에서 제공하는 Editor 를 이용하여 코딩 하겠습니다. 다른 분들은 메모장에 작성하셔도
되고 저처럼 웹에서 제공하는 프로그램을 사용하셔도 됩니다.
<p> - 해당하는 라인을 몽땅 잡아먹는 태그입니다. <p>태그 속에 어떤 글이 나오더라도 한 줄을
다 차지하기 때문에 한 라인을 작성하고 new Line을 적용시키기 위해서 사용합니다. 해당 태그는
“필수 HTML tag”라고 제목을 작성할 때 등등 사용합니다!
<span> - 한 라인을 몽땅 잡아먹는 태그가 있다면, 그에 반대되는 태그가 있어야 하겠죠? span태
그는 자신이 Text로 표시한 영역만 차지하는 태그입니다.

10. 10
<br> - 그렇다면 <p>태그 속에 글을 작성하던 도중 new line으로 넘어가고 싶거나, <span>을 사
용하면서 new line을 사용하는 상황이 꼭! 옵니다. 그럴 경우에도 new line처리를 해주는 tag가 존
재합니다. 그 태그는 <br>태그인데요. 태그 속에 작성해도 되고 별도의 태그 밖에 작성하셔도 됩
니다. 다음 이미지는 태그 속에서 <br> 태그를 사용한 예 입니다.
<input> - 이름에서도 볼 수 있듯이 입력을 받을 수 있게끔 해주는 태그입니다. 인풋 태그는 type
라는 속성값을 반드시 작성해주어야 합니다. (이와 같이 몇몇 태그들은 반드시 작성해야 하는 속
성값들이 존재합니다!) 속성은 시작하는 태그 속에 적어주시면 됩니다. 다음 이미지에서 제공되는
속성값들은 <input type=”text”> <input type=”button”>등이 있는데요. 이 외에도 설정할 수 있는
속성들이 매우 많습니다. (속성에 대한 부분은 마지막에 소개 해 드릴 예정입니다.)
사용 가능한 속성들 button , checkbox , color , date , datetime , datetime-local , email , file ,
hidden , image , month , number , password , radio , range , reset , search ,
submit , tel , text , time , url , week
이 속성 중 가장 많
이 사용하는 속성
button , email , file , hidden , image , password , radio, submit, text
속성 중 submit은 서버로 데이터를 전송할 때 해당하는 input태그를 사용하겠다는 뜻인데요. 화
면에 표시될 때 button과 똑 같은 UI로 제공이 되기 때문에 개발자들은 Submit 대신 Button으로
사용하길 권장합니다.
윗 그림에서 사용된 태그 속에 name 속성은 해당 태그만의 이름을 붙혀 주는 속성입니다. 이

11. 11
속성은 JavaScript라는 언어에서 사용하거나, 서버에서 사용합니다. 또한 value 속성은 초기 설정
값을 설정할 수 있고, 초기 설정 값은 사용자가 직접 변경할 수 있습니다. 하지만 우리가 지금까
지 봐온 글들은 마우스를 클릭할 당시 사라지는 값들을 많이 봤었는데요. 해당 속성은 value가 아
닌 placeholder 속성값에 값을 넣어주면 됩니다.
<table> - 해당 태그는 엑셀의 표라 생각하시면 편합니다. 엑셀처럼 행, 열 값을 갖고 있습니다.
또한 행, 열을 표시하기 위해서 행, 열 각각 <tr>, <td> 태그를 함께 사용해야 합니다.(밑에서 더
자세히 설명할게요) 웹 환경에서 채팅 시 사용되는 Layout을 <span>, <div>, <p> 태그로 작성하
면 많은 시간과 노력과 인내심이 필요한데요. <table>태그를 이용하면 쉽게 해결할 수 있습니다.
윗 그림에선 디자이너 분들의 이해를 돕기 위해서 table의 영역에 테두리를 그렸습니다. 테두리
를 그려주는 태그는 <style> 속에 정의합니다. <style>은 CSS를 해당 페이지에서 설정할 수 있도
록 지원해주는 태그입니다.

12. 12
또한 table 태그 속에 사용한 <tr>, <td> 태그들이 많이 헷갈리시죠? <tr >태그는 row(왼쪽에서
오른쪽으로 보는 방향)이고, <td>태그는 column(위에서 아래로 보는 방향)입니다. 또한 맨 상단에
는 해당하는 테이블의 header라는 것을 표현해 주기 위하여 <th> 태그를 사용하곤 합니다.( <td>
태그를 사용해도 무방합니다.)
또한 <table>태그는 엄
청난 속성을 제공합니다.
바로 열/행 합치기 속성
입니다. colspan ,
rowspan 속성을 이용하
여 다수의 tr<row>와
td<col>을 합칠 수 있도
록 지원합니다.
th1 / tr1 th2 / tr2
td1 / tr2 td2 / tr2
td1 / tr3 td2 / tr3

13. 13
<textarea> - 태그의 이름에서 묻어 나오듯이 텍스트를 엄청 많이 쓸 수 있는 영역을 선언하는
태그입니다.
<img> - 이미지를 넣을 때 사용하는 태그입니다.
src는 이미지가 있는 파일의 경로+파일명을 작성해 주면 됩니다. alt속성은 만약 이 파일을 불러오
기에 실패한다면 해당 페이지를 보고 있는 사람에게 출력해줄 메시지를 작성하시면 됩니다.
<ol> <ul>- 리스트를 보여주기 위하여 사용합니다. (ol : ordered list, ul: unordered list)

14. 14
유용하게 사용하시길 바랍니다.

15. 15
<a> 태그 - <a> 태그는 링크를 삽입할 때 사용합니다. href 속성은 인터넷 주소(개발자들은
URL 이라 부릅니다)을 작성해 주거나 같은 페이지 속에 있는 특정한 태그의 name 값을 넣어주면,
그 name 의 태그가 있는 곳으로 이동할 수 있게끔 지원합니다.
해당 태그로 이동한 예로는 teamnexters.com에 있는 상단바(about, product, contact)가 적용되어
있습니다.
<h1>~<h5>, <i>, <b> 태그 - <h+숫자> 태그들은 제목(header)를 나타낼 때 사용합니다. 숫자가
커질수록 작은 글자로 보여줍니다. 비슷한 기능을 제공하는 <strong> 태그가 있습니다.
또한 지금까지 설명드린 <p> 태그와 <span> 태그 등의 텍스트 작성 중 볼드체 태그 <b>를 넣
거나 기울어져 적용되는 이탈릭체 태그 <i>를 적용시킬 수 있습니다.
HTML 마무리
HTML을 익히신 디자이너 분들은 웹 개발과 관련된 많은 분들께 로망입니다… 프로젝트에서 한
번씩은 꼭 사용되는 태그들만 소개해드렸습니다. 해당 문서에 작성되어 있는 태그들만 알고 계시
면 프로젝트 하시는 데 큰 어려움은 없을 것이라 생각됩니다. (추가적으로 필요한 1,2 태그들이 있
을 수 있을거에요. <nav> 태그와 같은..? <form>..? – 하지만 모르셔도 될듯..?) 적은 지면에 최대한
의 정보를 담으려고 많이 노력했지만 부족한 부분이 있으리라 생각합니다. 관심 있으신 분들은
다음 링크와 책을 통해 더 많이 배우실 수 있으니 참고 부탁드립니다.
* W3School: http://www.w3schools.com/html/
* 모던 웹 디자인을 위한 HTML5+CSS3 입문 (저자 윤인성)

16. 16
프로그래밍 언어
지난 3주차까지 팀 회의 꾸준히 가지셨죠? 회의 때마다 개발자들의 대화 어떠셨나요? 분명 한
국어로 얘기하는데 알아듣기 어렵지 않으셨나요?
예를 들어 “이건 Express쓰자~”, “Spring(boot)으로 하면~~ Boot 쓰면 돼~~”, “Angular js 쓰면
될거같아~~” 등등 아니 도대체 이건 무슨 뜻이야!! 내가 제일 궁금한 건 이 기능이 구현이 가능
하냐고!!! 구현 못한다고는 하지만.. 왠지 가능할 것도 같고.. 그렇다고 안 믿자니 그건 또 아닌디..
개발자들이 사용하는 프로그래밍 언어에는 각각 특색이 있습니다. 이는 어떤 기능을 구현하고
자 할 때 기능의 특징에 따라 언어도 달라져야 한다는 말이죠. 그래서 한 기능을 구현할 때 실력
있는 C언어 개발자보다 Java 언어 초보자가 더 빠르게 구현하는 일이 벌어집니다. 만들고자 하는
커피에 따라 드립 방식으로 만드느냐, 뜨거운 증기로 커피를 내리느냐의 차이와 같죠.
그렇기 때문에 소프트웨어 개발자들이 사용하는 언어들은 종류가 많아요!
여러분도 한 번쯤 들어보셨을 만한 유명한 언어로는 C, C++ , C# , Object-C , Swift , Java , Python,
Ruby, JavaScript, HTML, CSS 정도가 있고, 최근 사용 빈도가 점점 낮아지고 있는 Visual Basic,
COBOL, Fortran 등이 있습니다.
각 언어들의 장점을 이야기 해보도록 하죠.
C언어
C언어는 메모리에 직접 접근 가능한 '하드웨어에 가까운 언어'이기 때문에 하드웨어를 직접 조
작할 때 많이 쓰입니다. 예를 들어 컴퓨터 내에는 RAM이라는 일종의 메모리 장치가 있습니다. 네
앞서 설명 드렸던 딱딱한 하드웨어이죠!
C언어를 이용하여 RAM에 개발자가 직접 접근할 수 있습니다. 그렇기 때문에 해킹에 이용되기도

17. 17
합니다. 최근에는 냉장고, 티비 등 가전제품을 포함한 온 세상의 사물들간의 네트워크, 즉 IoT
(Internet of Things) 개발에 많이 쓰입니다.
더불어 디자이너 분들이 원하는 몇몇 기능(헬 기능..)들을 수행할 수 있습니다. Android/iOS에 등
록된 앱을 보시면 Snow, Analog, Candy Camera와 같은 카메라 필터 혹은 사용자의 얼굴 인식 어
플들이 있습니다. 이런 앱들은 “이미지를 이용하여 서비스를 제공하는 기술”이라고 생각하시면 됩
니다! 그리고 C를 기반으로 한 OpenCV라는 기술을 이용하여 개발합니다.
이쯤 되면 “하.. OpenCV는 또 뭐야; 개발 강의하러 왔나; 주디 차삐까!!!!!! “ 라고 생각하시는 디
자이너분들이 계실 텐데, 안 됩니다..ㅎㅎ OpenCV가 이미지를 이용한 모든 기술이 가능한 만능은
아닙니다. OpenCV에는 개발자에게 기본으로 제공해주는 기술이 있는데요. 이 기술은 ‘사용자 얼
굴 인식’ 기술입니다. 즉, 사용자의 얼굴은 인식할 수 있지만, 동물의 얼굴 인식은 어려울 수 있다
는 것이죠. (고양이인식, 강아지 인식 등.. 이런 인식은 요새 알파고 때문에 핫한 인공지능을 배우
신 분들이 아니라면, 매우 어려울 것 같네요.. 굳이 만든다면 새로 처음부터 만드는 수준?) 그렇기
때문에 마켓에 올라온 앱 대부분은 사용자의 얼굴을 인식하고, 이를 이용하여 서비스를 제공하는
것이 대부분이죠.
(추가적으로 가능한 부분들은 OpenCV Open API라고 Google 에 검색하시면 가능한 기능들이 소
개됩니다. 대부분 Stack Overflow라는 개발자 커뮤니티 사이트에서 설명해주곤 하죠.)
C++
C++, 앞서 설명드렸던 C와 이름이 비슷하죠? 아! C++언어도 C언어와 동일하게 메모리에 접근
할 수 있는 프로그래밍 언어이기 때문에 다른 언어에 비해 비교적 하드웨어에 가까운 언어라는
공통점이 있지만 C언어와는 완전히 다른 언어입니다.
C++의 OpenGL은 그래픽과 관련된 기술입니다. OpenGL은 사각형, 원 이런 도형을 이용하여 그
림을 그리고 애니메이션을 넣는 기술입니다. 하지만 엄청난 수학적 지식이 필요하며(선형 대수학
등등) 엄청난 노가다성 코드를 작성해야 하기 때문에 기피하는 개발자들이 많아요!
이러한 문제를 해결해주는 개발 프로그램들이 있는데요, 많이 들어보신 Unity, Unreal이 바로 그
것입니다. 물리엔진이라 불리기도 하죠. 그래서 C++ 언어는 게임 개발에 많이 이용됩니다.
C#
이야~ 앞에 소개되었던 언어들과 이름이 또 되게 비슷하죠? 하지만 사용되는 분야는 다릅니다.
C언어를 이용하여 이미지 프로세싱 기술을 사용하고, C++언어를 이용하여 OpenGL기술을 사용했
지만. 하지만 C#기술을 이용하면 이 기술들을 사용할 수 없습니다.
C#은 GUI에 집중되어 있는 프로그래밍 언어입니다. Mac에서는 사용불가능하며 오로지 Window
에서만 사용가능한 프로그래밍 언어이죠. 기본적으로 GUI를 편리하게 구성할 수 있는 기능을 제
공해주기 때문에 많은 개발자들이 GUI를 만들 때 사용합니다.

18. 18
또한 서버를 구성할 때 사용하죠. 브라우저의 주소 창을 보고 있으면 가끔 ‘.aspx’ 확장자가 붙
은 주소가 있습니다.
다음과 같이 확장자가 ‘.aspx’로 마무리되면 C#을 이용하여 개발한 웹,서버가 되는 것이죠
Object-C
지금까지 소개해 드렸던 C가 붙은 프로그래밍 언어들과 다르게 Mac환경에서만 사용 가능한 C
언어라 생각하시면 편할 것 같습니다. iOS앱과 Mac의 Native 프로그램을 개발할 수 있습니다.
(native란 “그 지역에서만”이란 뜻 입니다. Windows native는 윈도우 환경에서만 되는 놈들. Mac
native는 맥 환경에서만 되는놈들. Android Native는 안드로이드에서만 되는놈들! 이라는 뜻 입니
다.)
아직 사용해보진 않았지만 개발자들 사이에선 “C언어와 C++언어가 합쳐진 언어와 비슷하다”라고
이야기 하곤 합니다.
iOS의 애니메이션 범위가 어디까지인지 궁금한 분들이 많으시지만 Android에서 가능한 애니메이
션이 iOS에서 70%이상 가능할 것이라 생각합니다.
제일 중요한게 어떤 애니메이션이 가능하고, 어떤 것이 불가능한지 궁금하실테죠..
카톡, 라인 혹은 다른 어플에서 사용하실 때 작동하는 애니메이션은 다 가능합니다..
Java
한국 개발자들이 많이 사용하는 언어입니다. Android 개발할 때도 사용되는 언어인 만큼 매우
유명한 프로그래밍 언어이죠. Java와 C# 언어는 서로 라이벌입니다. Java를 이용해서 GUI를 만들
수도 있습니다.
Java를 이용하여 서버, 웹 프론트를 만들 수 있습니다. 또한 서버 개발 시 사용하는 유명한 프
레임워크가 있는데요. 대표적으로 Spring, Spring Boot, Struts 이 있습니다.
Spring, Spring Boot, Struts는 개발자들이 암묵적으로 지켜지고 있는 프로그래밍 규약이 있습니
다. 그건 “MVC 디자인패턴”을 이용하여 개발이 완료된 이후에도 코드 수정을 편리하게 할 수 있
게 해야하며 디자이너와 협업 시 화면을 제외한 모든 부분을 먼저 개발하여 개발일정을 많이 단
축시킬 수 있다는 장점을 가지고 있습니다. 또한 많은 코드를 작성할 필요 없이 엄청난 양의 코
드를 제공해주기 때문에 개발자에게 엄청난 편리성을 제공해주죠.
여기서 Android의 Animation이 빠질 수 없겠죠? 많은 디자이너 분들이 궁금해 하시는 분야가
애니메이션이라 생각되는데요. 이 부분에서 이야기가 길어지겠군요. 조금 쉬시고 읽으시길 권장합
니다.

19. 19
마치며..
직군 교차 강의를 할 당시에는 주어진 시간이 넉넉하지 않아서 많은 부분을 알려드리지 못했습
니다. 부족했던 시간이 저에게도 가장 아쉽게 다가오네요.
세션 중 “Android의 애니메이션은 저희가 직접 만들 수 있나요?”란 질문에 “아니요”라고 답을 했
지만 꾸준히 HTML공부를 하시면 Android의 Animation도 HTML과 비슷한 Markup language(마크
업 언어- <>으로 이루어진 언어를 마크업 언어라 부릅니다.)로 이루어져 있어서 쉽게 적응하실 수
있으실 겁니다.
최대한 자세한 HTML의 내용을 전달해 드리고 싶었지만 그러면 처음의 의도와는 다르게 사용하
지 않는 태그들을 설명드릴 수 있을 것 같아 이번에 배운 HTML은 정말 프로젝트에서 사용하는
기초적인 태그들만 소개해 드렸습니다. 실제 프로젝트에선 해당 태그들 외의 몇 개의 태그들이
더 사용될 수 있다는 점을 유의해 주시길 바랍니다.(약 3~4개).
아! 해당 HTML을 다 아신다고 해서 바로 프로젝트를 진행하실 수 있는 것은 아닙니다. HTML의
쌍둥이라 불리는 CSS언어를 익히셔야 완벽하게 프로젝트를 진행하실 수 있습니다.
하지만 시작이 반이라 HTML를 익히시면 CSS의 벽은 크지 않다고 느껴질 거라 생각합니다.
 HTML를 익히고 오신다면 CSS에 대하여 얼마든지 질문하셔도 됩니다. 강사 못지않게 피드백
드립니다.(약속)
기타 외 공부하시면서 제가 도와드릴 부분이 있다면 얼마든지 질문 주세요.
감사합니다.