이제 본격적으로 코딩에 대해 공부할건데, 우선 코딩의 개념을 다음의 비유로 이해해보자.

강아지에게 손을 알려주고 싶을때 우리는 어떻게 하는가를 떠올려보자.
강아지에게 손 이라고 말하며 강아지의 앞발을 자기 손으로 올려놓는다.
이걸 몇번 반복하면 강아지가 눈치를 챈다. 손이라고 하면 앞발을 손 위에 올리면 되는구나.
이제 손 이라고 하면 강아지는 자신의 앞발을 손 위에 올린다.

코딩도 강아지에게 명령을 가르치는것과 거의 비슷하다.
백지상태의 컴퓨터에게 내가 하고싶은 일을 알려주고, 그 명령어를 외치면 그대로 실행한다. 참으로 간단하지 않은가!
다만 코딩은 강아지처럼 몇번 반복해서 알려줄 필요는 없고 정확한 문법으로 작성만 하면 한방에 이해한다. 정확한 문법으로 작성한다면 말이지만.

코딩은 다음과 같은 메커니즘을 통해 진행된다.
컴퓨터에게 내가 하고 싶은일을 알려주는것 : 함수 선언
알려준 일을 하라고 시키는 것 : 실행

이 개념이 잡혔다면 본격적인 코딩 공부를 해보자.


전 포스팅에서도 말했지만 플러터를 이용하기 위해서는 다트라는 언어를 사용해야 한다.
다트를 안드로이드 스튜디오에서도 연습하는 것도 가능하지만,
연습용도로 쓰기에 안드로이드 스튜디오는 너무 번거로우니까 다트패드라는 연습용 사이트를 이용해 보도록 하자.

아래 링크로 다트패드에 접속해보자.

https://dartpad.dev/?


왼쪽에 가장 긴 영어부분이 코드를 작성하는 부분.
오른쪽 위 콘솔창이 코드를 실행하고 결과물을 출력해주는 부분이다.
오른쪽 밑 창은 코드에 에러가 있을 시 알려주는 부분이다.
코드작성칸의 파란색네모(run)를 눌러 예제를 실행시켜보자.
콘솔창에 결과물이 나오는 것을 확인 할 수 있다.

이제 신기한 거 다 봤다면 우리도 직접 코드를 작성해보자.
우리가 작성할 코드는 콘솔창에 'hello, world!'라는 문구를 출력시키는 프로그램을 작성하는 것이다.

void main(){
  print('hello, world!');
}



를 작성할건데, 괄호가 눈이 어지러우니 간단하게 저 코드의 괄호 위치만 훑어보자.

함수선언부 : void main(){}
함수 내용 : print('hello, world!');
함수 실행부 : 생략되어있음 : main()

이렇게 이루어져 있는데, void main(){}의 {중괄호} 부분에
print('hello, world!');가 들어가 있는 형식이다.
print('hello, world!'); 앞에 영문을 알 수 없는 스페이스가 2개 들어가 있는데 간단히 말하자면 이건 줄맞춤을 위해 띄운것이다.
추후에 다시 설명하도록 하겠다.

이제 다음 스텝을 따라서 작성해보도록 하자.

0. 기존에 있던 모든 내용을 다 지움
1. void main
2. (
여기서 잠깐.
왼쪽 괄호를 치자 오른쪽괄호가 자동으로 작성되었다.
다트패드에는 이런식으로 코딩을 하기 쉽고 편하게 자동으로 작성해주는 부분들이 있다. 역시 과학의 발전은 나를 기다려주지 않는다.
3.)
4.{
여기서도 잠깐.
아까와 마찬가지로 여기도 중괄호가 자동완성 되는 것을 볼 수 있다.
그런데 우리가 작성해야 할 코드를 자세히 보도록 하자.
중괄호 안에 내용이 있지 않은가?
그러므로 우리는 여기서 엔터를 쳐보자.
줄 바꿈이 되면서 중괄호가 아래줄로 자동완성 되었으며, 자동으로 스페이스 2개가 먹어져있는것을 확인 할 수 있다. 이 스페이스는 지우지 말고 여기다가 바로 다음을 입력하자.
5.print('hello, world!');
6.파란색네모(run)클릭.

옆에 창에 헬로 월드가 뜨는가?
축하한다 이제 당신도 엄연한 다트 프로그래머이다. 이력서 특기란에 다트 개발경험을 적어놓도록 하자.

하나씩 뜯어 보며 구조를 파악해보자.

- void
아직은 몰라도 됨
- main(){}
시키고 싶은 일을 {중괄호}에 기입
- print();
하고싶은 말을 (소괄호)에 기입
;는 일종의 마침표라고 지금은 이해하면 된다.
생략된 함수실행 명령어 : main()

즉, main()라는 말은 앞으로 중괄호 안에 있는말을 실행시키는거야 라고 인지 시켜준 후
main()을 실행하라는 명령을 내려서 실행시키는 것이다.
그런데 지금 우리가 작성한 것엔 mian()라는 명령어 실행부분이 없다.
왜 없는지는 약간 어려운 설명이 필요한데, 아직 거기까지 받아들일 준비가 되어있지 않았으므로
지금은 main()이라는 함수는 실행선언을 하지 않아도 자동으로 실행된다고 이해하고 넘어가자.
추후 챕터에서 설명하겠다.

어쨌든 이것이 프로그래밍 혹은 코딩의 함수를 선언하고 실행시키는 방법이며
조금 더 기술적으로 파고들자면

-void
아직은 몰라도 됨
-main(){}
함수를 선언하는 방법
{중괄호}안에 시키고 싶은 내용을 넣는것
-print();
아까 main()라는 명령어로 함수를 실행시킨다고 했던것 기억나는가?
print()또한 같다. 미리 선언해둔 print(){}를 실행시킨 것이다.
그런데 우린 print()를 선언한 적이 없는데, 거의 모든 프로그래밍 언어는 이렇게 몇몇 함수들을 미리 구현해둔다. 추후 챕터에서 설명하겠다.
-'hello, world!'
(소괄호)의 뜻은 print()를 실행할때 소괄호의 내용을 참고해서 실행하라는 뜻
이를 파라메터, 한국말로는 속성이라고 한다.
아직은 이렇게만 파악하고 있어도 충분하다.
-생략된 함수실행 명령어 : main()
로 이루어져 있다고 할 수 있다.

이렇게 기초 중의 기초인 hello,world!를 통해 코딩에 대해 간단하게 알아보았다.
아래에 있는 다음 포스팅으로 넘어가자.


ps. 용어정리 잠깐 하자면,
프로그래밍을 할때 줄줄이 적혀있는 영어를 코드,
코드를 작성하는 행위를 코딩이라고 한다.
그리고 저렇게 코딩을 해서 프로그램을 만들어내는 행위를 프로그래밍이라고 하는데, 뭐 그렇게 엄격하게 구분해서 쓰는거 같진 않다.
알아만 두도록 하자.


들어가기에 앞서,

이 글은 비전공자, 초보자가 어플을 만든다고 가정하고 쓴 글이다.

완전 일반인의 눈높이에서 코딩에 대한 개념부터 다트 언어의 기본적인 사용을 기술할 예정이다.

 

이전 글을 통해 플러터와 안드로이스 스튜디오를 깔았으니 이제 애써 피해온 프로그래밍 언어와 마주할 시간이 되었다.

만약 아직 안 깔았다면 아래 글을 참고하도록 하자.

https://bipro.tistory.com/category/%ED%94%8C%EB%9F%AC%ED%84%B0%28Flutter%29%20-%20%EC%96%B4%ED%94%8C%EB%A7%8C%EB%93%A4%EA%B8%B

 

우선 프로그래밍 언어란 무엇이고 왜 필요한지 간단히 짚고 넘어가보자.

저번 글에서도 언급했다시피 프로그래밍 언어란 컴퓨터에게 시킬 일들을 적는것을 의미한다.

다만, 아직은 컴퓨터가 우리와 대화가 되진 않으므로 컴퓨터가 이해할 수 있는 언어로 할 일을 설명해줘야한다.

이 방식중에서 가장 편한 방식이 바로 코딩 즉 프로그래밍 코드를 적어서 컴퓨터에게 주는 방식인 것이다.

 

그리고 이 언어는 종류가 꽤 다양하기 때문에, 상황 혹은 개발방향에 따라 그 부분으로 특화된 언어를 쓰는것이 유리하다.

그렇기에 우리는 어플 제작에 특화된 플러터를 사용할 수 있는 다트라는 언어를 사용해야 하는것이다.

 

약간 헷갈릴 수 있으니 정리하자면

 

어플을 만드는 프로그램 : 안드로이드 스튜디오
안드로이드 스튜디오에서 어플을 쉽게 만들수 있게 도와주는 패키지 : 플러터
플러터를 사용해서 프로그래밍을 할 수 있는 언어 : 다트

 

라고 이해할 수 있다.

 

여기까지 간단하게 프로그래밍과 우리가 쓸 플러터에 대한 매우 간단한 개념정리를 해보았다.

뭐 우리의 목표는 간단히 어플 만들어서 부자 되고 싶어서 공부하는 거니까,

지금은 이 정도만 알면 충분한 듯 하다.

컴퓨터 역사 공부할 시간이 어딨나, 빨리 어플 만들어서 부자 되어야 하는데.

 

이제 이 후의 포스팅을 통해서 다트의 기본 문법에 대해 정리하고

플러터를 이용해 간단한 어플을 만들어 어플의 기본 골격을 이해하고

본격적으로 의미있는 어플을 만들어 보도록 하자.

비전공자가 어플을 만들려면 어떻게 해야할까.

아예 감조차 잡히지 않을 쌩초보자들을 위해 말하자면, 코딩이라는 것을 해야한다.

코딩은 쉽게 말하자면 컴퓨터에게 시킬 일 리스트를 주는 것이다. 

그러면 컴퓨터는 그 일 리스트를 수행하게 되는데 이를 프로그램이라고 부르며,

여기서 프로그램 > 어플 즉 어플은 프로그램의 일종이라고 생각하면 된다.

그렇다면 그래서 그 코딩이라는 것은 어떻게 하는가에 대한 의문이 생길 것이다.

그런데 여기서 좀 충격적인게 아까 코딩 = 시킬 일 리스트 라고 했던게 뻥이 아니고,

시킬 일 리스트만 잘 적어주면 된다.

즉, 컴퓨터에 있는 메모장 열어서 줄줄 적는 식으로도 코딩이 가능하다는 말이다.

 

그런데 이렇게 코딩하는 사람은 거의 없다.

우리가 컴퓨터에게 일을 시키고 싶을 때 쓰는 약속된 언어들이 있는데,

이 언어 규칙에 맞춰서 적어 놓지 않으면 컴퓨터가 이해를 하지 못한다.

그래서 우리는 이 규칙을 잘 검토해주는 개발용 프로그램들을 사용하곤 한다.

 

그래서 비전공자가 어플을 만들려면 어떻게 해야할까.

많은 방법이 있겠지만, 우리같은 초보들은 될 수 있으면 많은 기능이 제공되는 프로그램을 이용하여 어플을 개발하는것이 바람직하다.

때문에 나는 많은 기능을 제공하고, 한번 만들면 안드로이드 폰에서도,

아이폰에서도 사용가능하게 어플을 뽑아 낼수 있는 플러터를 선택했다.

 

플러터라는 말 또한 처음 들어보았을 초보자들을 위해 간단히 설명하자면,

플러터는 안드로이드스튜디오라는 어플 만드는 프로그램에 부가기능을 추가해주는 프로그램이다.

처음 들어보는 말 많이 들어봐야 힘만 빠지니까 일단은 아 그런가보다 하는게 멘탈관리에 좋을 듯 하다.

 

이제부터 플러터를 깔면서 본격적으로 어플 개발을 해보자.

 

1. 구글에서 안드로이드 스튜디오 검색

우선 공식 홈페이지에 잘 들어가보자. 이건 어렵지 않다.

 

2. 안드로이드 스튜디오 접속 및 안드로이드 스튜디오 다운로드

다운로드를 잘 받아보자. 

외국에서 만든 프로그램이라 영어로 적혀있지만,

홈페이지를 스크린 샷 찍어서 클릭해야 할 곳들을 표시해두었으니 크게 어려울 건 없다. 아직까지는.

 

3. 안드로이드 스튜디오 설치

다운받은 설치파일을 실행시켜 안드로이드 스튜디오를 설치한다.

설치단계마다 스크린샷을 찍어두었으니 똑같이 따라하면 큰 문제는 없을듯 한데,

중간에 프로그램을 깔 경로를 지정하는 부분이 있다.

보통은 c드라이브로 잡혀있을테니 굳이 수정하지 말고 c드라이브에 설치하길 권장한다.

 

 

4. 첫 안드로이드 스튜디오와의 만남

기존 설정값을 가져올거냐는 질문인데 우리와는 상관없으니 그냥 ok를 누르자.

그러면 드디어 첫 안드로이드 스튜디오 실행화면을 볼 수 있다.

 

5. 안드로이드 스튜디오 세팅 마저 하기

돌고래가 반겨주길래 다 된줄 알았더니 아직 설정할게 남아있었다.

당황하지 않고 스크린샷을 따라 설정을 마저 해주도록 하자.

중간에 검은테마와 흰 테마를 고르는 부분이 있는데 검은테마를 하도록 하자.

흰 테마는 눈이 아프고 전기세도 많이 나올거 같아서 비추.

 

6. 플러터 다운로드

안드로이드스튜디오가 설치되었으니 이제 플러터를 설치해보자.

플러터를 검색하고, 공식 홈페이지에 들어간다.

시작을 누르고, 설치에서 윈도우를 눌러준다. 혹시 맥이나 리눅스를 쓰는 사람이 있다면 자기걸 선택하자.

자기 운영체제를 누르면 Flutter SDK 다운로드가 뜰텐데, 여기서 파란 버튼을 누르면 최신 버전이 받아져야 하는데 필자는 안됐다. 그래서 SDK 아카이브를 눌러 다음페이지로 이동했다.

여기서 최신버전을 잘 눌러 다운로드 받도록 하자.

 

 

7.플러터 압축풀기

플러터는 설치파일이 아닌 압축파일이다.

적절한 경로에 압축을 풀면 되는데, 경로가 쉬워야 나중에 접근하기가 쉽다.

그러므로 왠만하면 c:\flutter 폴더를 경로로 하도록 하자.

 

 

8. 안드로이드 스튜디오에 플러터 등록하기

이제 다시 안드로이드 스튜디오를 열어보자. 다음과 같은 화면이 반길것이다.

하지만 설정이 아직 끝나지 않았다. 안드로이드에 플러터와 다트를 설치해주어야 정말 끝이 난다.

왼쪽 plugins 탭을 눌러 flutter를 install하면 Dart도 설치할꺼냐고 물어봐주는데 모두 설치하자.

다 설치하고 나면 Restart IDE라고 뜰텐데 눌러서 재시작해주자.

 

9. 안드로이드 스튜디오에 압축폴더 등록하기

이제 다시 시작하면 드디어 New flutter project라는 버튼이 보인다.

여기서 이걸 누르면 플러터 앱 개발을 시작할 수 있는것이다!

라고 생각하고 누르면 또 설정할 게 남아있다.

이번엔 플러터가 어디 깔려있냐고 묻는건데, 

아까 압축 풀었던 그 경로를 선택해주면 된다.

 

10. 드디어 첫 플러터와의 만남

여기까지 다 되었다면 이제 플러터를 드디어 시작할 수 있다!

프로젝트 제목을 적당히 기입하고 옵션을 스크린샷처럼 맞춰준 후 finish를 누르면

디렉토리가 없다고 뜰텐데 여기서 당황하지 말고 Create를 눌러주자.

 

11. 짜잔!

드디어 첫 플러터 개발환경이 완료되었다.

지금 화면을 가득 채운 영어들은 우리를 협박하는게 아니고 플러터에서 제공하는 테스트 예제이니 너무 놀라진 말자.

 

12. 테스트 예제 가지고 놀아보기

기왕에 개발환경도 완료했고 이 압박감을 주는 영어들이 뭐인지 궁금하기도 하니 테스트예제를 한번 실행시켜보자.

오른쪽 상단의 툴바에서 스크린샷처럼 크롬이나 엣지를 선택하고 실행버튼을 눌러보면

그러면 버튼을 누르면 1씩 카운팅되는 간단한 예제가 나온다.

 

가끔 구글플레이스토어에 쓸때없는앱 이런거 검색하면 이 비슷한거 많이 나오는데,

이 환경설정 한 것 만으로도 벌써 어플 개발자에 거의 근접해버린 것이다.

축하한다. 이제 빨리 어플에 광고달아서 부자가 될 일만 남았으니, 돈 벌거든 무슨색 스포츠카를 살건지 생각하며 개발환경 설정을 마무리 하도록 하자.

비전공자가 독학 코딩을 추구하면 안 되는 걸까

 

아직은 초등학교가 아닌 국민학교를 다니던 시절, 엄마가 컴퓨터학원을 보내준 적이 있다.

 

엄마는 내가 그 학원에서 최신 기술인 컴퓨터를 배워 차세대 기술혁신의 리더가 되길 바랬었겠지만,

안타깝게도 나는 그 학원에서 비행기게임과 타자연습만 줄기차게 하고 왔다.

나중에 안 사실인데 타자연습은 컴퓨터 실력과 큰 연관이 있지는 않았다.

 

그런데, 엄마 생각이 맞았던 거 같다.

그때 비행기게임 좀 덜 하고 컴퓨터 공부를 했어야 했는데.

우리동네 컴퓨터도사로 불리던 준형이는 지금 네이버에서 내 연봉 두배 받으면서 잘 지낸다더라. ㄹㅇㅋㅋ

그런고로, 나는 내 인생의 목표를 다시 정하기로 했다.

어플 하나 대박나서 집에서 놀면서 월 400 받으면서 살아야겠다.

 

이런 세속적이지만 설득력 있는 이유로 코딩의 세계에 입문했다.

그런데 다시 해보려고 하니, 이거 너무 어렵다.

 

확실히 인터넷은 정보의 바다가 맞다.

정말 쉽게 많은 정보들을 접할 수 있다.

그런데, 정보의 레벨이 너무 제각각이다.

어떤 글은 비전공자도 알아먹을만한 내용이지만 너무 개념적인 내용이라 실제 적용하는 방법을 모르겠고,

어떤글은 현업뛰는 아저씨들만 이해할 수 있는 암호 비스무리한 무언가로 이루어져 있기도 했다.

그래서 내 눈높이의 내가 원하는 정보를 찾는 건 하늘의 별따기였다.

 

그래서, 비전공자의 눈높이에서 한스텝 한스텝 따라오면
진짜 결과물을 만들수 있는 블로그를 내가 만들어보기로 했다. 

 

 

세상에는 나와 같은 이유는 아니더라도

나와 비슷한 길을 걸으려는 사람들이 있을텐데,

그 분들과 내 경험, 시행착오를 공유해 도움이 되길 바래본다.

+ Recent posts