Nextion 디스플레이로 Fridgeye 앱 만들기: 단계별 가이드

부품 및 소모품

Arduino UNO	×	1
포토레지스터 (조도 센서)	×	1
저항 3.3kΩ	×	1
Itead Nextion Enhanced 3.5" 터치 디스플레이	×	1

앱 및 온라인 서비스

	Nextion GUI Editor
	Arduino IDE
	GIMP (GNU Image Manipulation Program)

프로젝트 소개

올해 7월, 독일의 디자인 학생들이 킥스타터에 Fridgeye라는 냉장고 조도 센서 프로토타입을 풍자적으로 올렸습니다. 킥스타터에는 황당한 하드웨어 프로젝트가 자주 등장하고, 팀이 실제처럼 보이게 많은 노력을 기울인 탓에 사람들이 진위 여부를 판단하기 어려웠죠. 저는 처음부터 이 프로젝트를 좋아했습니다. 냉장고 불이 켜지는지 알고 싶어서가 아니라, IoT 입문자에게 완벽하게 범위가 정해진 프로젝트이며 확장 가능성이 무궁무진하기 때문입니다.

Fridgeye 장치 제작

이 글의 핵심은 Nextion 터치 디스플레이를 아두이노에 연결해 Fridgeye 앱을 구동하는 것이지만, 먼저 빛을 감지하는 실제 장치가 필요합니다. 5분이면 충분합니다. 아두이노, 브레드보드, 포토레지스터, 3.3kΩ 저항만 있으면 됩니다. 아래 회로도처럼 연결하세요. 아직 화면 연결은 신경 쓰지 마시고 아두이노, 저항, 포토레지스터에만 집중하세요.

저는 ProtoShield에 미니 브레드보드를 올려 실드 스택 형태로 깔끔하게 만들었지만, 일반 브레드보드를 써도 무방합니다.

아두이노에 다음 스케치를 업로드하고 시리얼 모니터(보드레이트 9600)를 열면 0.5초마다 조도 값이 출력됩니다. 센서를 가리고, 불을 켜고 끄고, 스마트폰 플래시를 비춰 보며 값이 0(완전 어둠)~1024(강한 빛) 사이로 변하는지 확인하세요.

void setup() { Serial.begin(9600); }
void loop() {
  int val = analogRead(A0);
  Serial.println(val);
  delay(500);
}

Fridgeye 앱이란?

Fridgeye 앱은 Fridgeye 장치의 든든한 동반자입니다. 요즘 IoT 기기는 전용 앱 없이는 살아남기 힘들죠. 킥스타터 페이지를 보면 앱은 단순히 감지된 빛의 백분율을 보여주며, 0% 또는 100%만 표시되는 듯합니다.

중간 99개의 값도 활용해 더 풍부한 정보를 제공하도록 개선해 보겠습니다. 컨셉 이미지를 현실로 구현해 봅시다.

Nextion 디스플레이 시작하기

이 프로젝트에는 Nextion Enhanced 3.5" 터치 디스플레이를 사용합니다. 저항막 방식 풀 터치 스크린으로, 그래픽 제어의 무거운 작업을 디스플레이가 맡아 아두이노 같은 저사양 기기도 시리얼 두 줄만으로 제어할 수 있습니다. 하드웨어는 훌륭하지만 초보자에게 문서 탐색이 어려울 수 있으니 차근차근 따라오세요.

디스플레이 프로그래밍 모델

기존 아두이노 디스플레이 라이브러리는 픽셀 단위 그리기를 추상화하지만, 여전히 런타임에 많은 그리기 코드가 필요합니다. Nextion은 MVVM/MVC 패턴과 유사하게, 화면 구성을 미리 에디터에서 완성해 디스플레이 플래시에 저장하고, 런타임에는 아두이노가 미리 할당된 ID로 UI 요소를 참조만 합니다. 즉, 아두이노는 뷰와 컨트롤의 지휘자 역할만 합니다.

뷰 준비하기

Fridgeye 앱은 단일 페이지로 단순하지만, Nextion은 복잡한 다중 페이지 앱도 지원합니다. 모든 설계는 Nextion GUI Editor(WYSIWYG)에서 수행합니다. 문서가 초보자에게 난해하지만 익숙해지면 빠르게 복잡한 레이아웃을 만들 수 있습니다.

에디터를 열기 전, 배경 이미지를 준비합니다. 목업 이미지를 보면 런타임에 변하는 것은 감지된 빛의 백분율뿐이고, 로고·배경색·하단 녹색 바는 정적입니다. 이 정적 요소들을 합친 배경 이미지를 만드세요. 저는 GIMP로 5분 만에 만들었습니다(화면 해상도 480×320 픽셀에 맞춤).

Nextion Editor 사용하기

주의: Nextion Editor는 .NET Framework가 필요하며 현재 Windows만 공식 지원합니다. 저는 Mac에서 Parallels로 윈도우 10 VM을 돌려 문제없이 사용했습니다. 리눅스 Wine 테스트는 안 해봤습니다.

File → New로 프로젝트 생성.
장치 선택 다이얼로그에서 Enhanced, 3.5" 선택. 아직 OK 누르지 마세요.

다이얼로그 왼쪽 상단 DISPLAY 탭에서 90 Horizontal 방향 선택.
이제 OK 클릭.
툴박스에서 Picture 클릭 → 요소 p0 추가.
왼쪽 하단 Picture/Font 패널의 Picture 탭 선택.

+ 버튼 클릭 → GIMP로 만든 배경 이미지 선택 → Open.
오른쪽 속성 패널에서 pic 속성 더블클릭 → 배경 이미지 선택 → OK.
툴박스 Text 클릭 → 텍스트 영역 t0 추가(왼쪽 상단). id 속성 값(예: 2) 기록해 두세요. 나중에 아두이노 코드에서 씁니다.
텍스트 영역을 "Light Status" 아래 원하는 위치로 드래그하고 크게 리사이즈.
텍스트 영역 배경을 투명하게 만들기: t0 선택 → sta 속성을 solid color에서 crop image로 변경.
picc 속성 더블클릭 → 다시 배경 이미지 선택 → OK. 이제 텍스트 영역 배경이 투명해집니다.
pco 속성(글자 색) 설정. 저는 R:125, G:231, B:191로 지정.

Tools → Font Generator 클릭.
Font Creator에서 높이 96, 원하는 폰트(예: Montserrat) 선택.
폰트 이름 입력 → Generate Font → 기억하기 쉬운 위치에 저장. 나중에 다시 필요합니다.
Font Creator 닫기 → 생성된 폰트 추가 여부 묻으면 Yes. 이제 폰트 인덱스 0으로 참조 가능.
t0의 txt 속성을 100%로 바꿔 더미 텍스트 확인. 속성 입력란 밖을 클릭해야 에디터 화면 갱신.
t0 위치 미세 조정.
상단 툴바 Compile 클릭.

성공하면 %AppData%\Nextion Editor\bianyi\에 컴파일된 .tft 파일이 생깁니다.

디스플레이 업데이트

컴파일된 TFT 파일을 디스플레이에 올리는 방법은 두 가지입니다.

USB-TTL 컨버터가 있으면 Nextion IDE에서 직접 업로드.
없으면 마이크로 SD 카드(FAT32, 단일 TFT 파일만)에 복사 후 디스플레이 뒷면 슬롯에 삽입.

Nextion Editor가 생성한 TFT 파일 경로(윈도우):

C:\Users\[사용자명]\AppData\Roaming\Nextion IDE\bianyi\[프로젝트명].tft

AppData 폴더는 숨김 속성이라 '숨긴 파일 보기'를 켜야 보입니다.

SD 카드 업데이트 절차:

디스플레이 전원 끄기
SD 카드 삽입
전원 켜기 → 업데이트 진행 화면 표시
업데이트 완료 후 전원 끄기
SD 카드 제거(중요: 카드 꽂힌 상태로는 앱 실행 안 됨)
다시 전원 켜기 → Fridgeye 앱 화면 나타남(아직 센서 값은 없음)

아두이노가 Nextion과 대화하게 하기

디스플레이에 뷰가 올라갔으니 아두이노 코드로 센서 값을 읽어 화면에 표시해야 합니다.

Nextion 라이브러리 설치

최신 Nextion Arduino 라이브러리 다운로드.
ITEADLIB_Arduino_Nextion 폴더 전체를 아두이노 라이브러리 폴더에 복사.
- Windows: C:\Users\[사용자명]\Documents\Arduino\libraries
- Mac: ~/Documents/Arduino/libraries
아두이노 메가 사용 시 7번으로 건너뛰기.
아두이노 우노 사용 시 라이브러리 폴더 안 NexConfig.h 열기.

다음 줄 주석 처리:

#define DEBUG_SERIAL_ENABLE
#define dbSerial Serial

nexSerial 정의를 Serial2에서 Serial로 변경(우노의 RX/TX 직결용):
```
#define nexSerial Serial
```
아두이노 IDE 재시작(이미 열려 있었다면).
File → New로 새 스케치 생성 후 아래 코드로 교체.

#include "Nextion.h"
long lastUpdate;
int SENSOR = A0;
NexText t0 = NexText(0, 2, "t0");

void checkSensor() {
  int val = map(analogRead(SENSOR), 0, 1024, 0, 100);
  String displayText = String(val) + "%";
  t0.setText(displayText.c_str());
}

void setup(void) {
  lastUpdate = millis();
  pinMode(SENSOR, INPUT);
  nexInit();
}

void loop(void) {
  nexLoop(NULL);
  if (millis() - lastUpdate > 100) {
    checkSensor();
    lastUpdate = millis();
  }
}

코드 분석

코드가 바로 이해되면 이 섹션은 건너뛰세요. 초보자를 위해 줄별로 설명합니다.

#include "Nextion.h": Nextion 라이브러리 사용 선언.
long lastUpdate;: 화면 업데이트 주기 제어용 변수.
int SENSOR = A0;: A0 핀에 읽기 쉬운 이름 부여. 좋은 습관입니다.
NexText t0 = NexText(0, 2, "t0");: GUI에서 만든 텍스트 요소(t0, 페이지 0, 컴포넌트 ID 2)와 연결.
checkSensor(): 핵심 로직.
- analogRead(SENSOR)로 0~1024 값 읽기.
- map()으로 0~100%로 변환.
- 문자열로 바꿔 % 붙인 후 t0.setText()로 디스플레이에 전송.
setup(): lastUpdate 초기화, A0을 INPUT으로, Nextion 라이브러리 초기화(nexInit()).
loop(): nexLoop(NULL)로 라이브러리 서비스(터치 이벤트 미사용 시 NULL). 100ms마다 checkSensor() 호출.

30줄도 안 되는 코드로 Nextion 디스플레이와 양방향 통신 완성!

디스플레이 연결

스케치를 아두이노에 업로드(Ctrl+U)한 후 디스플레이를 연결하세요. 우노는 업로드 시 시리얼 라인을 쓰므로 업로드 중에는 디스플레이를 분리해야 합니다(메가는 예외). 연결은 프리칭 다이어그램 참조. 전원 켜면 Fridgeye 앱이 실시간 조도 백분율을 보여줍니다.

마무리

"이걸 냉장고 안에 넣으면 화면도 안 보이는데 무슨 소용이야?"라고 생각할 수 있습니다. 맞습니다. 실용성보다는 만들고 배우는 재미에 집중한 프로젝트입니다. 하지만 센서는 냉장고에 두고 디스플레이는 밖에 두는 식으로 확장해 보세요. Wi-Fi, 블루투스, 지그비, 일반 무선 모듈 등 방법은 무궁무진합니다. 시도해 보셨다면 트위터 @KevinSidwar나 이메일(Kevin at sidwar dot com)로 공유해 주세요. 즐거운 해킹 되세요!

이 글이 재미있었다면 Fridgeye 컨셉을 중심으로 한 IoT 입문 강의를 준비 중이니 관심 부탁드립니다. 끝까지 읽어주셔서 정말 감사합니다. 멋진 하루 보내세요!

코드

Fridgeye 앱용 아두이노 스케치

Nextion 디스플레이와 통신하며 현재 조도 센서 값을 표시하는 코드입니다.

#include "Nextion.h"
long lastUpdate;
int SENSOR = A0;
NexText t0 = NexText(0, 2, "t0");

void checkSensor() {
  int val = map(analogRead(SENSOR), 0, 1024, 0, 100);
  String displayText = String(val) + "%";
  t0.setText(displayText.c_str());
}

void setup(void) {
  lastUpdate = millis();
  pinMode(SENSOR, INPUT);
  nexInit();
}

void loop(void) {
  nexLoop(NULL);
  if (millis() - lastUpdate > 100) {
    checkSensor();
    lastUpdate = millis();
  }
}

회로도

아두이노, 포토레지스터, 저항, Nextion 디스플레이 연결 배선도입니다.

자율 홈 어시스턴트 로봇 'O'nine' 제작 – ROS, Alexa, MoveIt, 내비게이션 완전 가이드 라즈베리 파이 2 + 윈도우 10 IoT Core에서 블루투스 시리얼 통신 구현하기

제조공정

3D 프린팅

자동화 제어 시스템

산업기술