[macOS] VSCode를 사용하여 아두이노 IDE를 대체하기.

아두이노 IDE 잘 쓰고 계십니까?

저는 아두이노의 이 IDE 화면을 볼때마다 솔직히 ㅃㅏㄱ이 칩니다...

킹리적 갓심이지만, 저는 아두이노 재단이 이 앞뒤 꽉꽉 틀어막힌 IDE를 일부러 개선하지 않는다고 생각합니다.

즉, 할 수 있으면서도 IDE를 개선해주지 않는다고 생각한다 이 말입니다...!

 

간단한 Hello World를 출력하는데 필요한 코드만 작성해보아도 마음속으로 '아니, 왜?' 라는 의문을 2~3번 갖게 됩니다.

println() 에서 여는 괄호 (를 입력해도 닫는 괄호 )를 자동으로 입력해주지 않습니다.

또한 괄호 안에 큰 따옴표 "를 입력해도 2쌍을 자동으로 띄워주지도 않습니다.

이런 사소한 것들은 참을 수 있는데, Serial.println() 를 입력한다고 생각해볼 때, Serial 이후 .을 찍고 사용 가능한 클래스 혹은 메소드들을 띄워주지 않는 것이 제일 불편합니다...

 

개발 환경

컴퓨터 : MacBook Pro (16-inch, 2019)

프로세서 : 인텔 i9 8core

운영체제 : macOS Big Sur 11.3

저는 맥에서 작업하는 환경입니다. 아마 환경 변수들이 다른 OS와 다르겠지만 같은 원리로 설정해주면 되기 때문에 잘 안된다면 각 OS별로 구글링 해보는 것을 추천드립니다.

 

구글링 시작

이러한 불편함, 귀찮음들이 인간이란 존재가 발전할 수 있는 원동력이라고 생각합니다.

저는 VSCode에서 작업하는것이 매우 익숙한데, "VSCode의 extensions를 사용하여 Arduino IDE를 대채할 수 있지 않을까?" 라는 생각을 했습니다.

아두이노는 ATMEL의 ATMEGA 시리즈를 사용하기 때문에 분명 관련된 extension이 존재할거라 확신을 갖고 구글링을 하기 시작했습니다.

결과를 먼저 말씀드리자면, 아래와 같이 두 가지 방법이 있습니다.

(급한 분들은 8. Summary로 이동.)

1. 'Arduino' extension을 설치하여 사용.

2. 'Code Runner' 및 'PlatformIO IDE' extension을 설치하여 사용.

저는 첫 번째 방법이 기존의 Arduino IDE의 사용 방식과 가장 가깝다고 생가각하여 Arduino extension을 설치하여 사용해봤습니다.

1. Prerequisites

당연한 이야기지만, 먼저 준비물이 필요합니다.

Arduino IDE와 Visual Studio Code가 설치되어 있어야 합니다.

(Arduino IDE 사용법은 숙지 상태라고 가정하겠습니다.)

Visual Studio Code 설치 방법 :

https://conceptbug.tistory.com/entry/Ubuntu-맥-OS에서-Parallels-가상-머신으로-Ubuntu-설치하기-2-개발자-환경-설정?category=921113#h_8

[Ubuntu] 맥 OS에서 Parallels 가상 머신으로 Ubuntu 설치하기 #2 "개발자 환경 설정"

VSCode가 설치되었다면, Extensions에 들어가 'C/C++' 및 'Arudino' 확장팩을 설치한 후 VSCode를 reload 합니다.

저는 추가로 'arduino-snippets'도 설치했습니다.

(저는 Extension을 '확장팩'이라 칭하지만, '확장자'라고 해도 무관합니다.)

(스니펫이 무엇인지 모르신다면 구글링 해보시면 바로 아~ 이거구나! 하고 캐치하실 겁니다.)

 

2. Extension 설정

이제 제일 귀찮고 매우 졸린 작업을 해야합니다....

사용하고자 하는 Extension을 처음 클릭하면 Details 탭에 머무르게 됩니다.

아래 캡쳐한 사진처럼 Feature Contributions 탭으로 넘어가면 해당 Extension을 사용할 때 필요한 정보들이 모여있습니다.

이러한 내용들을 모두 읽어보아야 확장팩을 정확하게, 그리고 올바르게 사용할 수 있습니다.

(참고로 Dependencies 탭으로 넘어가면 'C/C++' extension을 의존성(dependencies)으로 두고 있는 것을 확인할 수 있습니다. 이 때문에 미리 설치해둬야 합니다.)

이 포스팅의 맨 처음 "Hello World"를 출력하는 코드는 Arduino IDE를 사용하여 작성한 프로젝트로, 아래와 같이 VSCode로 작성할 프로젝트와 따로 분리하여 놓았습니다.

test_with_vscode 폴더를 VSCode로 열어볼 것입니다.

 

VSCode의 설정(Settings)으로 들어가 Extensions > Arduino configuration으로 들어갑니다.

아래 화면은 아무것도 설정하지 않은 초기 화면입니다.

이 GUI 환경의 설정 화면에서 설정을 하고나면 이 내용들이 json 파일로 저장됩니다.

혹시나 해서 json 파일로 저장된 내용을 공유합니다.

(본인의 개발 환경에 따라 달라질 수 있습니다. 다시 말씀드리지만 저는 맥OS 입니다.)

{
    "editor.fontSize": 16,
    "explorer.confirmDelete": false,
    "editor.fontFamily": "'D2Coding'",
    "terminal.integrated.automationShell.osx": "",
    "terminal.integrated.fontFamily": "'D2Coding'",
    "terminal.integrated.fontSize": 16,
    "C_Cpp.updateChannel": "Insiders",
    "workbench.editorAssociations": [
        {
            "viewType": "jupyter.notebook.ipynb",
            "filenamePattern": "*.ipynb"
        }
    ],
    "python.pythonPath": "/usr/bin/python3",
    "arduino.commandPath": "Contents/MacOS/Arduino",
    "arduino.path": "/Applications",
    "arduino.additionalUrls": [
        "http://arduino.esp8266.com/stable/package_esp8266com_index.json"
    ]
}

 

3. 보드 설정

Command Palette를 통해 명령어를 입력할 것입니다.

다행히도 해당 extension은 >Arduino:로 시작하는 명령어를 사용하기 때문에 햇갈릴 일이 없네요.

(맥 기준 단축키는 cmd+shift+P 입니다)

 

>Arduino: Board Manager를 입력합니다.

아래와 같은 보드 매니저가 실행된 것을 볼 수 있습니다.

저는 지금 Arduino Mega를 들고 있으므로 megaAVR Boards를 설치했습니다.

(물론 많이 사용하는 Uno 보드를 위해 AVR Baords도 설치했습니다.)

뭐 이런식으로 아래의 터미널 창에서 무언가 설치되었다는 것을 알려줍니다.

그리고 VSCoded의 우측 하단(Status Bar라고 한다)을 보면 아래와 같이 이제 감이 잡히는 버튼들이 생겨난 것을 볼 수 있습니다.

이 설정들은 Arduino IDE를 사용할때도 설정해줘야 했던 항목들입니다.

<Select Board Type>을 누르면 아래와 같이 보드를 선택할 수 있습니다.

(여기서 Arduino Board Configuration 탭이 생겨난 것을 보아 command palette를 통해서도 실행 가능한 것 같습니다.)

프로세서도 ATmega2560으로 자동으로 선택되었다. 내가 수동으로 선택한 것은 아닌 것 같다.

 

4. 포트 설정

같은 방법으로 Status bar의 <Select Serial Port>버튼을 클릭해 현재 보드와 연결된 포트를 선택합니다.

/dev/tty***는 유닉스 계열 OS의 국룰이다.

이렇게 보드와 포트를 선택 해주었습니다.

중간의 플러그 모양의 아이콘은 시리얼 모니터를 여는 버튼입니다.

 

5. 프로그래머 설정

사실 Arduino IDE를 사용할때도 프로그래머를 설정하는 옵션이 있긴 있었는데 제가 따로 설정해주진 않았던 것 같습니다.

구글링을 해 봐도 따로 프로그래머를 설정한 사람도 없는 것 같으니 그냥 패스하겠습니다.

(참고로 방금 Arduino IDE를 실행시켜 확인해보니 AVRISP mkII이 default로 되어있는 것을 확인했습니다.)

 

6. 코드 작성

이제 준비는 다 된 것 같고, 폴더 밑에 test_with_vscode.ino 파일을 만들어 코드를 작성한 후 저장했습니다.

3줄짜리 코드에 당당하게 에러 3개 발생.

음.. 역시 한번에 될 리가 없죠.

별것도 아닌 코드인데 빨간줄이 3개나 틱틱틱 그어져 있네요.

어쩐지 . 찍고나서 추천 목록 안뜨던게 느낌이 좀 싸~ 했습니다.

 

에러 내용은 식별자를 정의할 수없다고 합니다.

이 시련의 시점에서 제가 의심할 수 있는 포인트가 두 가지 있습니다.

1. 솔직히, 일단 컴파일을 안했다. (억지이긴 한데 진짜 안 하긴 함.)

2. 구글링을 해 보니, 남들은 C/C++ 설정 json 파일(c_cpp_properties.json)이 있던데 나는 arduino 설정 json 파일 1개만 있다.

arduino.json 파일의 내용은 위와 같습니다.

먼저 1번 포인트부터 클리어하기 위해 컴파일을 해보았습니다.

컴파일 버튼은 우측 상단(Editor Groups라고 합니다)에 있습니다.

이 확장팩에서는 '컴파일'을 'verify'라고 하는 것 같습니다.

처음 사용하는 extension에 대해 잘 모를때는 feature contributions 탭을 마구 뒤져보면 단서가 나오기도 합니다.

기적이 일어났습니다!

컴파일 한 번 했을 뿐인데 터미널에 뭐가 스르르륵 내려가더니 빨간줄이 모두 사라지고 C/C++ 설정 json 파일도 생겨났습니다!!

Arduino extension 설정 파일과 C/C++ 설정 파일이 모두 생성되었다.

컴파일(verify)이 정답이었습니다.

보드에 프로그램을 업로드 하고 시리얼 모니터로 확인해봤습니다.

음~ 아주 잘 되고 있네요.

 

7. Command Palette : ">Arduino: Initialize"

현재 상태로 VSCode로 열어둔 폴더에 .vscode와 설정 파일들이 존재하는 한, 그 트리 밑으로의 .ino 파일들은 잘 될거라고 생각합니다.

여기서 의문이 들었습니다.

"기본 아두이노 IDE를 사용하지 않는다고 할 때, 내가 VSCode로 작업 폴더를 생성하고 파일을 만들면, 일일이 설정 파일을 만들어주어야 하나?"

이를 해결하기 위해 또 문서를 읽다보니 Command Palette에서 사용 가능한 일명 한방 명령어를 찾았습니다.

먼저 아주 깔끔하게 처음부터 접근하는 환경을 만들어 주었습니다.

Command Palette를 열고 >Arduino: Initialize 명령어를 입력합니다.

만들고자 하는 .ino 파일명을 입력합니다.

보드 타입을 선택하라고 합니다.

이번에는 상황을 바꿔 NANO 보드를 사용한다는 가정을 했습니다.

귀여운 나노

보드까지 선택하고 나면 사실상 코드를 작성하는데 큰 불편이 없습니다.

(아직 시리얼 포트를 지정하지 않은 상태입니다.)

위 캡쳐본과 같이 필요한 파일들이 모두 생성되었고, 파일에 기본적인 몸체도 자동으로 작성되어 있습니다.

이 상태에서 코드를 작성해봤는데 IntelliSense 잘 작동하며 자동 추천, 완성 모두 잘 됐습니다.

편-안

 

8. Summary

순서는 아래와 같습니다.

1. 폴더 생성 및 해당 폴더를 VSCode로 open.

2. Command Palette에서 >Arduino: Initialize 입력.

3. .ino, .c, .cpp 파일 생성.

4. 타겟 보드 선택.

5. 타겟에 맞춰 한 번 verify(아마 컴파일) 된 후 .json 설정 파일 2개가 생성됨.

6. 코드 작성.

7. 포트 설정. -> arduino.json 파일에 포트 설정이 추가됨.

8. 업로드 버튼 클릭 or Command Palette에서 >Arduino: Upload 입력.

9. 컴파일, 업로드 된 후 자동으로 하단에 시리얼 모니터 창이 열린 후 결과 확인.

 

정리를 해 보자면 VSCode의 extension을 설치하고, 해당 extension이 참고할 json 파일 2개를 만들어내는 것이 포인트 입니다.

물론 두 설정 파일에 컴파일러에게 알려줄 정보들이 모두 담겨있어야 합니다.

 

마무리

아두이노 켤 때 마다 솔직히 짜증났었는데, 이제 아주 편안하게 작업할 수 있게 되었습니다.

물론 간단하게 테스트 한 결과고, 라이브러리를 포함하여 사용해보지 않았기 때문에 100% 사용 해본것은 아닙니다.

구글링 하면서 대충 알아보니 include path에 작성해줘야 하는 것 같던데...

시간날 때 라이브러리 포함 테스트를 해 봐야겠습니다.