Ex) 랜섬웨어 방지, 백신, 파일보호 등

앱 -> Win32 API -> NTFS/FAT 등 요청 -> FltMgr -> 미니필터 -> 실 파일시스템 => 직접 디스크 제어 X, I/O 요청 흐름에 개입

IRP / 주요 함수

• IRP_MJ_CREATE : 파일 열기/생성
• IRP_MJ_READ : 읽기
• IRP_MJ_WRITE : 파일 쓰기
• IRP_MJ_SET_INFORMATION : 이름변경 / 삭제
• IRP_MJ_CLEANUP
• IRP_MJ_CLOSE

위 이벤트에 대해 미니필터가 콜백을 등록.

PreCreate(...) // 요청 처리 전
PostCreate(...) // 요청 처리 후 결과 확인

Altitude : 필터 드라이버 우선순위 Instance : 볼륨별 장착(각 드라이브에 인스턴스 생성 가능) Context : 파일 별 상태 기록 User <-> Kernel 통신

FltCreateCommunicationPort

사용해서 사용자 프로그램과 연결

이름 얻기

FltGetFileNameInformation

diskpart # 스크 제어를 위한 프로그램 진입
list vol # 윈도우를 설치했던 용량의 볼륨 체크
list disk # 윈도우를 설치했던 디스크 확인
sel disk 0 # 윈도우 설치했던 디스크 번호 입력
list part # 윈도우 설치 시 만들어지는 파티션 중 복구 파티션 확인
sel part 3
format fs=fat32 quick
assign letter=S # 복구 파티션을 S문자로 지정
sel vol 1
assign letter=W
exit # diskpart 나가기
dir W:\ # 이후 윈도우 파일 보이면 그대로 진행
bcdboot W:\Windows /s S: /f UEFI

워게임 문제 중 서버측에서 요청을 위조해서 로컬의 파일을 읽어드리는 문제

flag가 /flag.txt에 위치해 있을때 로컬 코드 중 fetch를 사용하거나 요청을 보낼 수 있는 함수를 사용한다면 아래와 같이 시도해볼 수 있다.

file:///flag.txt
file://localhost/flag.txt

이 방법을 변형해서 다양하게 사용가능하다.

우회하기 위해서 Burp Suite 프로그램이 필요하다.

Intercept를 활성화 시켜 브라우저에서 접속하는 주소를 거치도록 만들어준다. 이후 접속 전 헤더 내용에 X-Forwarded-For:127.0.0.1 을 입력해서 헤더를 수정해서 전송하면 우회할 수 있다.

모든 환경에서 적용되는 것이 아닌 워게임 문제 풀이 중 해당 헤더를 통해 아이피를 가져오는 문제에서 활용할 수 있음.

입력값

username = input()

properties = (
    f'{{"isAdmin":"No",'
    f'"username":"{username}"}}')

위 코드에서 username에 user1","isAdmin":"Yes"를 입력한다면 선행 입력된 isAdmin 값은 추후 사용자의 입력에 따라 Yes로 변경된다.

초등학교때 본 책을 구매하여 이해하지 못한 채 지금에서야 보면서 따라하게 되었습니다.

운영체제 이론

• 프로세스
• 스레드
• 스택
• 호출 규약

프로세스

먼저 프로그램이 실행되면 보조기억장치 -> 주기억장치 적재(로더) -> 실행되는 것을 프로세스라 함.

주기억장치(RAM)

프로세스의 메모리 할당에 대해 이해하기 위해 메모리의 구조를 이해하여야 한다. 메모리는 위와 같은 구조를 가지고 있다. Code(Text) 영역 -> Data 영역 -> Heap 영역 -> Stack 영역 순으로 낮은 메모리 주소에서 높은 메모리 주소로 내려가는 것을 알 수 있다.

Code 영역

• 실행 할 프로그램의 코드의 저장 공간 할당

Data 영역

• 프로그램 동작을 위한 변수 저장 공간 할당

Heap 영역

• 변수, 함수 등 동적 저장 공간 할당

Stack 영역

• 지역 변수 / 매개 변수 저장 공간 할당

멀티태스킹 운영체제(한번에 다중 처리가 가능)

프로그램을 다중 처리 해야하기 때문에 시스템 자원(CPU, 램 등)을 독점적으로 사용하는 것을 방지 하기 위해 각 프로세스에 자원 사용 시간을 적절히 배분한다.

커널

커널은 소프트웨어가 동작 시 하드웨어의 자원을 필요로 할 때 각 프로세스에 분배하고 프로세스 제어, 메모리 제어 등을 수행하는 운영체제의 가장 아래 계증체 속한다. -> OS 핵심 부분으로 소프트웨어 <-> 하드웨어간 징검다리 역할을 수행한다.

프로세스 컨텍스트

컨텍스트(Context) 문맥이라고도 불리는 컨텍스트는 운영체제가 관리하는 프로세스 정보라고 볼 수 있다. 컨텍스트는 간략하게 CPU 상태, PCB, 가장주소공간 데이터를 의미한다. 이러한 정보를 바탕으로 커널이 프로세스를 실행하고 있따는 것을 의미한다.

• CPU 상태 CPU 레지스터, Instruction Pointer 등이 존재한다.
• PCB(Process Control Block) 자료구조를 의미하며 커널이 프로세스를 표현하기 위해 사용된다. PCB는 체인으로, 다른 PCB에 연결되어 있다.
• OS가 관리상 사용하는 정보 :* Process Status, Process ID, 스케쥴링 정보, 우선순위
• CPU 수행 관련 하드웨어 정보 :* Program Counter, Register
• 메모리 정보 :* Code, Data, Stack 영역의 위치 정보
• 가장주소공간 데이터 위에서 살펴보았던 코드 영역, 데이터 영역, 스택 영역, 힙 영역을 의미한다.

프로세스 상태

컨텍스트 스위칭에 의해 프로세스는 실행 상태에 놓일 수도, 정지 상태에 놓일 수도 있다.

위 프로세스 상태 다이어그램을 통해 이해할 수 있다.

• 실행 : 프로세스가 CPU 점유
• 대기 : 프로세스가 CPU를 점유하기 위해 기다리고 있는 상태
• 블록 : 당장 작업 수행이 불가능한 상태(Sleep 함수 등 동기화로 대기 시 프로세스 블록)
• 정지 상태 : 스케쥴러나 인터럽트로 비활성화된 상태(외부에서 재개 필요)

Context Switching

CPU가 한 프로세스에 다른 프로세스의 PCB 정보로 스위칭 되는 과정을 의미한다. 위 과정처럼 두 프로세스가 실행과 중지를 반복하면서 컨텍스트 스위칭이 발생하는 것을 알 수 있다. 컨텍스트 스위칭은 시스템 콜이나 외부 인터럽트에 의해 발생할 수 있다.

스레드

하나의 프로세스에는 여러개의 스레드를 포함하고 있다. 커널은 프로세스의 스레드를 관리해 프로세스의 동작을 조정한다. 스레드1과 스레드2가 있다고 생각해보자. 스레드 1과 2의 가상주소 공간에는 Stack, Heap, Data, Code의 공간들이 존재할 것이다. 이러한 가상주소 공간은 프로세스의 Heap, Data, Code의 영역을 공유한다. 영역을 공유하는 만큼 데이터의 무결성이 중요하다. 각 스레드에서 읽기 전용 데이터를 접근할 때에는 문제가 발생하지 않지만 쓰기 데이터를 접근할 때에는 데이터 무결성 문제가 발생할 수 있다(단, 스택 영역은 스레드의 공유 자원이기 때문에 일반적인 경우에 어떠한 스레드로부터 간섭을 받지 않기 때문에 동기화 문제가 발생하지 않는다) 프로세스에 PCB가 존재하듯이 스레드 정보를 관리하기 위해 TCB(Thread Control Block)가 존재한다. TCB는 다음과 같은 정보를 담고 있다.

• 스레드 식별자
• 스택 포인터
• 프로그램 카운터
• 스레드 상태
• 레지스터 값
• 스레드를 담고 있는 프로세스의 PCB 포인터

스레드 경합 자료구조 혹은 데이터에 복수의 스레드가 접근하면 문제가 발생할 수 있다. 이러한 상태를 경쟁 상태 또는 경합 상태(Race Condition)라고 한다.

스레드 동기화

스레드 경합의 문제를 해결하기 위해서는 동기화를 적용하여야 한다. 동기화를 적용하기 위해서는 동기화 객체를 사용하면 되는데 동기화 기법의 큰 범주로는 유저 모드 동기화, 커널 모드 동기화가 존재한다.

• 유저 모드 동기화 크리티컬 섹션(Critical Section) 인터락 함수(Interlocked Family Of Function)

• 커널 모드 동기화 뮤텍스(Mutex) 세마포어(Semaphore) 이름있는 뮤텍스(Named Mutex) 이벤트(Event)

사전 준비

당연하게도 파이썬은 미리 준비되어 있어야 하고 웹캠이 꼭 필요하다. 프로젝트 폴더를 만들고 폴더에 터미널을 열어 아래와 같이 입력해서 DeepFace 라이브러리를 설치한다.

pip install deepface

추가로 OpenCV라는 파이썬으로 제작된 컴퓨터 비전 라이브러리를 설치하여 카메라를 활용할 것이다.

pip install opencv

이제 모든 준비가 완료되었고 프로젝트 폴더는 다음과 같이 구성하였다. 루트폴더/database에는 매칭시킬 얼굴 사진들이 들어가야 한다. 루트폴더에는 main.py 파일만 존재하면 된다. 이후 얼굴 사진들은 코드를 통해서 구할 수 있기 때문이다.

OpenCV 기초

바로 DeepFace를 사용하기보다 OpenCV에 대해 어느정도 알아가야 수월하게 진행할 수 있다. 다음은 실시간 카메라 영상을 송출하는 코드이다.

import cv2 # opencv 가져오기

capture = cv2.VideoCapture(0) # 0번째 카메라를 사용하겠다는 뜻으로 0 이후 숫자는 외부 카메라를 의미한다.
capture.set(cv2.CAP_PROP_FRAME_WIDTH,640) # 카메라의 가로 길이를 640px로 설정한다.
capture.set(cv2.CAP_PROP_FRAME_HEIGHT,480) # 카메라의 세로 길이를 480px로 설정한다.

while cv2.waitKey(30) < 0: # 30ms마다 입력 감지 갱신하고 입력되는 키가 있을때 까지 기다리기
    ret,frame = capture.read() # 카메라 화면 읽어드리기
    cv2.imshow("face",frame) # 카메라 화면을 띄우기 (새창 만들어짐)

capture.release() # 카메라를 사용하기 위해 할당된 메모리를 해제
cv2.destroyAllWindows() # 카메라 화면을 띄우기 위해 만들어진 창 삭제하기

위 코드를 통해 실시간으로 현재 카메라 화면을 새 창을 띄워 송출할 수 있다. 이해가 안될 수 있기에 필요한 함수만 다시 설명한다.

while cv2.waitKey(30) < 0:

위 구문은 cv2.waitKey(30)을 이해해야 한다. 위 함수는 30ms마다 키 입력을 감지하는데 입력된 키 값이 해당 함수로 반환된다. 따라서 0 미만으로 조건식을 작성한 이유는 아무키도 입력되지 않았을 경우 0 미만의 값이 반환되기 때문이다.

ret,frame = capture.read()

위 capture.read() 함수는 ret과 frame을 반환 받도록 하였는데 ret에는 카메라의 정상작동 유무에 대해서 참과 거짓을 반환하고 frame에는 현재 카메라에 촬영되는 모습을 담는다.

비교 사진 촬영하기

이제 DeepFace를 사용하기 위한 OpenCV 함수들에 대해서 이해하였으니 DeepFace를 직접 사용해본다. 먼저 비교할 사진들이 집합되어 있는 폴더(database)에 비교할 얼굴 사진들을 넣어야 한다. 비교할 얼굴 사진을 촬영하여 저장시켰다.

import cv2

capture = cv2.VideoCapture(0)
capture.set(CV_PROP_FRAME_WIDTH,640)
capture.set(CV_PROP_FRAME_HEIGHT,480)

while True:
    command = input("명령 입력 : ")
    if command == "c":
        ret,frame = capture.read()
        cv2.imwrite("database/jiwon.jpg",frame) # 사진을 database 폴더에 jiwon.jpg 이름으로 저장하는 함수
    elif command == "exit":
        break

capture.release()
cv2.destoryAllWindows()

여러 사진을 촬영할 수 있도록 명령을 입력하여 작동되도록 만들어보았다. 실행창에 c를 입력하면 사진이 촬영되어 database 폴더에 jiwon.jpg 이름으로 저장된다. 이후 이름을 바꾸고 여러 사진을 촬영하여도 된다.

얼굴 비교하기

얼굴을 비교하기 위해서 루트 폴더에 temp.jpg라는 이름으로 비교용 얼굴 사진을 저장시키고 database 폴더의 모든 얼굴을 탐색하여 얼굴을 비교하는 방식을 사용할 것이다.

import cv2
from deepface import DeepFace
capture = cv2.VideoCapture(0)
capture.set(CV_PROP_FRAME_WIDTH,640)
capture.set(CV_PROP_FRAME_HEIGHT,480)

while True:
    command = input("명령 입력 : ")
    if command == "c":
        captureImage("database/jiwon.jpg")
    elif command == "d":
        captureImage("temp.jpg")
        detect = DeepFace.find(
            img_path="temp.jpg",
            db_path="database",
            detector_backend="retinaface",
            model_name="ArcFace"
        )
        print(detect)
    elif command == "exit":
        break

capture.release()
cv2.destoryAllWindows()

def captureImage(path):
    ret,frame = capture.read()
    cv2.imwrite(path,frame)

위 코드를 실행하고 d를 입력하면 카메라를 통해 사진을 촬영하고 저장 후 다음과 같이 모델을 학습하는 과정을 거친다. 이후 database 폴더에 pkl이라는 모델이 만들어지고

일치하는 얼굴 사진 목록을 보여준다.

만약 일치하는 사진이 없다면 아래와 같이 빈 배열이 출력되는 것을 볼 수 있다.

위 과정을 통해서 얼굴 매칭을 통해 일치하는 얼굴을 인식하는 프로그램을 제작해보았다. 이후 과정에서는 출석부 시스템을 구현할때 DeepFace 오픈소스를 활용하여 제작할 것이다.

360도 사진 촬영

먼저 로드뷰에 사용될 사진을 촬영하여야 한다. 학교에 인스타 360 카메라가 있어서 남는 시간에 학교 곳곳을 촬영하였다.

촬영한 이미지는 insp라는 확장자로 나오는데 인스타 360 스튜디오를 통해서 한번 가공 후 jpg로 변환하여야 한다. 위와 같이 인스타 360 스튜디오로 가져왔다면 우측 상단에 내보내기 버튼이 존재한다. 이 버튼을 클릭해서 jpg 파일로 내보내면 된다.

이제부터 코딩을 시작할 것이다.

코딩 시작

이번 코딩은 그닥 어렵지 않다. Vue.js를 통해서 제작할 것이기 때문에 Vue.js 프로젝트를 만든다. 새로운 폴더를 만들어 VSCODE로 열고 터미널을 열어 아래와 같이 입력한다.

Vue 설치

npm create vue@latest

위 명령어는 Vue.js 프로젝트를 빠르게 만들기 위한 실행 명령어다. 명령어를 입력하면 프로젝트 구성에 필요한 것들을 물어보는데 아래와 같이 답하면 된다.

✔ Project name: roadview
✔ Add TypeScript? No
✔ Add JSX Support? No
✔ Add Vue Router for Single Page Application development? Yes
✔ Add Pinia for state management? No
✔ Add Vitest for Unit testing? No
✔ Add an End-to-End Testing Solution? No
✔ Add ESLint for code quality? No
✔ Add Prettier for code formatting? No
✔ Add Vue DevTools 7 extension for debugging? No

Scaffolding project in ./roadview
Done.

대부분 옵션을 No로 답하였는데 네 번째 Vue Router는 필요하기에 Yes로 답변하여야 한다. Vue Router는 React, Angular, Vue 등의 SPA 프레임워크에서 페이지 이동을 위한 프레임워크라고 생각하면 된다.

VIEW360 모듈 설치

360도 이미지를 움직일 수 있도록 하고 이미지 위에 플로팅 객체 등을 넣을 수 있는 VIEW360 모듈을 설치한다. 네이버에서 만든 프로젝트로 보인다. 아래 명령어를 통해 모듈을 설치할 수 있다.

npm install @egjs/vue3-view360@next

View360은 현재 베타 버전으로 계속 개발되고 있으며 최신 버전을 사용하기 위해 @next를 붙였다.

설치를 완료하였다면 해당 모듈 사용을 Vue 프로젝트에 명시하여야 한다. Vue 프로젝트의 src/main.js 파일을 열어보자 (스타일 파일은 모두 삭제하였다)

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import View360 from'@egjs/vue3-view360' // View360 가져오기
import '@egjs/vue3-view360/css/view360.min.css' // View360 스타일 가져오기

const app = createApp(App)

app.use(router)
app.use(View360) // View360 사용 명시
app.mount('#app')

위 코드와 같이 작성하면 이제 모든 준비가 마무리 되었다.

router 정리하기

프로젝트 자동 완성을 통해서 불필요한 HomeView.vue와 AboutView.vue 등의 파일이 많이 생성되었다. 불필요한 파일을 다 지우고 다음과 같이 구성하였다. components/spots 폴더는 교내 시설 각각의 지점에 대한 컴포넌츠를 넣을 것이고 상위 폴더의 Header와 MapViewPage는 상단 고정 메뉴와 하단 고정 지도를 표시해줄 것이다.

views 폴더에는 HomeView와 RoadViewPage를 만들었다. HomeView는 현재는 사용하지 않지만 추후 피드백을 통해서 소개 페이지가 필요하다고 느끼면 활용할 예정이다. RoadViewPage는 실제로 로드뷰가 나오는, View360 컴포넌츠를 사용할 파일이다.

App.vue

app.vue는 vue에서 화면을 표현하는 최상위 파일이다. 이 파일에는 상단 고정 메뉴인 Header와 라우터 페이지를 보여주기 위한 RouterView만 넣으면 된다.

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import Header from './components/Header.vue'
</script>

<template>
  <Header/>

  <RouterView />
</template>

<style scoped>

</style>

RoadViewPage.vue

RoadViewPage.vue에서는 실제 로드뷰 화면을 보여줄 것이다. 코드는 주석을 통해 설명하였으며 사전 지식은 라우터의 파라미터를 통해서 현재의 위치와 층수를 가져오고 기존 링크에 해당 파라미터가 없다면 기본 설정으로 로드하도록 제작하였다.

<script setup>
import { onBeforeMount, onMounted, ref, shallowRef, watch } from 'vue';
import Lobby from '@/components/spots/Lobby.vue'; // 중앙현관 컴포넌츠 가져오기
import MapViewPage from '@/components/MapViewPage.vue'; // 하단 고정 지도 가져오기
import { useRoute, useRouter } from 'vue-router'; // 라우터에서 파라미터와 페이지 이동 함수를 위함.

const route = useRoute()
const router = useRouter()
const views = { 'lobby': Lobby } // 파라미터의 값과 컴포넌츠 연동 추후 다양하게 추가
const pos = ref("lobby") // 기본 위치
const currentView = shallowRef(views[pos.value]) // 컴포넌츠는 shallowRef를 통해서 동적 컴포넌츠 전환 사용, views 객체에 있는 값들중 pos의 값과 일치하는 키를 가져와서 currentView에 값을 넣음
onMounted(() => {
  if (route.query.pos == null || route.query.floor == null) {
    router.push("/roadview?pos=lobby&floor=0") // 링크에 파라미터 존재하지 않으면 기본 페이지 이동
  } else {
    pos.value = route.query.pos // 현재 위치를 파라미터를 통해 저장
    currentView.value = views[pos.value] // 현재 화면을 views에 pos값을 통해서 키 매칭으로 저장 -> 동적 변환을 위해 추후 watch 함수로 전환 예정
  }
})
</script>

<template>
  <div style="position: fixed; z-index: 10000; bottom: 0px; margin-bottom: 10px; margin-left: 10px;">
    <MapViewPage />
  </div>
  <div>
    <div style="width: 100%; height: 100%;">
      <component :is="currentView" style="" /> // 동적 컴포넌츠
    </div>
  </div>
</template>

<style>
.view360-canvas {
  outline: 0;
  border-radius: 0px;

}

.viewer {

  width: 100%;
  height: 100vh;
  margin-left: auto;
  margin-right: auto;
}

.spot {
  background-color: white;
  padding: 10px;
  cursor: pointer;
  border-radius: 20px;
  transition: 0.5s;
}

.spot:hover {
  transition: 0.5s;
  transform: scale(1.2);
  background-color: rgb(201, 201, 201);
  padding: 10px;
  cursor: pointer;
  border-radius: 20px;

}
</style>

스타일은 이후 spots 폴더의 파일을 살펴보면서 이해할 수 있다.

router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import RoadView from '../views/RoadViewPage.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/roadview',
      component:RoadView
    }
  ]
})

export default router

라우터 파일은 별거 없다.

components/MapViewPage.vue

이 파일은 로드뷰 하단에 지도를 표시하는 컴포넌츠이다.

<template>
    <TransitionGroup  name="list" > <!-- 효과를 주기 위한 트랜지션 그룹-->
    <div class="map-icon" v-if="!isOpen" @click="isOpen = !isOpen"> <!-- 최소화 하였을 때 표시될 아이콘 -->
        <img src="../assets/mapicon.svg" style="width: 30px; margin-top: 5px;"/>

    </div>
    <div style="padding: 10px; background-color: white; border-radius: 10px;" v-if="isOpen">
        <div style="display: flex;margin-bottom: 10px;">
            <div>{{floor}}층 지도</div> <!-- URL의 파라미터를 통해 동적으로 변동 --> 
            <div @click="isOpen = !isOpen" style="margin-left: auto; cursor: pointer;">
                닫기
            </div>
        </div>
        <img :src="mapImage" style="width: 35vw;">

    </div>
</TransitionGroup >
</template>

<script setup>
import { onBeforeMount, ref } from 'vue';
import { useRoute } from 'vue-router';

import firstFloor from '../assets/floor.png' // 1층 지도 사진


const mapImages = [firstFloor] // 층별 지도 사진 배열
const mapImage = ref() // 현재 지도사진
const isOpen = ref(false) // 최소화 여부
const floor = ref(0) // 층수
const route = useRoute() 

onBeforeMount(()=>{
    floor.value = parseInt(route.query.floor)+1 // URL의 파라미터를 통해 층수를 가져와 1을 더한다.
    mapImage.value = mapImages[floor.value-1] // 층수에 1을 뺀 값의 순서의 배열을 가져온다.
})


</script>

<style>
#lobby{
    margin-left: 100px;

}
.dot{

    position: absolute; width: 12px; height: 12px; background-color: #0362fc; border-radius: 100px;
}

.list-move, /* apply transition to moving elements */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from{
    opacity: 0;
  transform: translateY(-30px);
}
.list-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}

.list-leave-active {
  position: absolute;
}
.map-icon{
    border-radius: 100px;
    padding: 10px;
    width: 40px;
    height: 40px;
    text-align: center;
    vertical-align: middle;
    transition: 0.5s;
    background-color: white;
    cursor: pointer;

}


.map-icon:hover{

    background-color: rgb(194, 194, 194);
    transition: 0.5s;

}

</style>

components/header.vue

이 파일은 상단에 고정되어 표시될 헤더 파일이다.

<template>
    <div style=" position: absolute; z-index: 1000; width: 100%; ">
        <div
            style="padding-top: 10px; padding-bottom: 10px; background-color: rgba(255, 255, 255,50%); width: 100%;">
            <div style="position: absolute; left: 50%; transform: translate(-50%);">
                {{ placeName }}
            </div>

            <div style="margin-left: 10px;">
                대영고등학교 교내 로드뷰
            </div>
        </div>
    </div>

</template>

<script setup>
import { onBeforeMount, ref } from 'vue';
import { useRoute } from 'vue-router';


const route = useRoute()
const placeName = ref("")
const places = {
    'lobby':"중앙현관",

}
onBeforeMount(()=>{
    placeName.value = places[route.query.pos]
})

</script>

지금까지의 코드를 이해하였다면 위의 코드는 쉽게 이해할 수 있을 것이다.

components/spots/Lobby.vue

이 파일은 로비의 360도 이미지 파일을 표시해주는 컴포넌츠 파일이다. 이게 본 포스팅의 가장 핵심이다.

<script setup>
import { View360, EquirectProjection } from '@egjs/vue3-view360'; // View360과 이미지를 가져오는 클래스 가져오기
import { onBeforeMount, ref } from 'vue';
import img from '../../assets/lobby.jpg'
const projection = new EquirectProjection({
    src: img
})

</script>

<style>

</style>

<template>
    <div>
    <!-- 아래와 같이 표현해야 정상적으로 표시됨 -->
        <View360 fov="130" class="viewer" :projection="projection"> 
            <div class="view360-hotspots">
                <div class="view360-hotspot" data-yaw="140" data-pitch="-12">
                    <div class="spot">서편 복도</div>
                </div>
                <div class="view360-hotspot" data-yaw="60" data-pitch="-15">
                    <div class="spot">동편 복도</div>
                </div>
            </div>

        </View360>
    </div>
</template>

위 코드를 보면 별 다른 스타일이 없다. 왜냐하면 RoadViewPage.vue 파일에 스타일을 모두 선언해두었기 때문에 불필요한 스타일 코드는 정리하였다.

결론

위 코드를 통해서 아래와 같은 로드뷰 서비스를 구축할 수 있다. 다음 포스팅에서는 여러층과 각 스팟에 설정된 버튼을 클릭하여 이동하는 동작까지 구현하고 마치려고 한다.

내년 신입생 유치를 위해서 우리 학교에서 다양한 홍보 활동을 진행하는데, 올해 입학 설명회는 모든 학교가 한 곳에 모여서 진행다는 것이였다. 따라서 다른 학교보다 특화적인 모습을 보여주어야 한다고 생각했고, 학교를 직접 방문해서 시설을 보질 못하기에 학교 내부를 로드뷰 형태로 제작하면 우리 학교 진학을 고려하는 신입생들에게 도움이 될 것 같다고 생각했다.

계획

웹앱 제작

교내 시설 탐방은 언제 어디서든지 볼 수 있어야 새로 들어올 신입생들이 관심을 가지고 유심히 볼 수 있다고 생각하여 설치형 어플리케이션이 아닌, 웹앱을 통해 접근성을 높이고자 하였다.

웹앱은 Vue.js를 통해서 제작할 예정이고 Nginx를 통해 웹앱을 배포할 예정이다.

로드뷰 구현

그렇다면 로드뷰 구현을 어떻게 할 것인가? 구글에 '로드뷰 api'와 같이 검색을 해보았지만, 기존 서비스를 제공하는 지도에서 로드뷰 영역을 추가하는 방법으로밖에 안된다.

내가 원하는 로드뷰는 360도 이미지를 움직이고 움직이면서 각 실에 들어갈 수 있도록 조작 플로팅 버튼을 구현하는 것이다. 이와 관련된 기능을 찾기 위해서 가장 기초가 되는 360도 이미지를 웹앱에 뿌릴 수 있어야 한다. 구글에 'vue js 360 viewer'를 검색하였더니 최상위글에 네이버 로고로 된 오픈소스가 있었다.

'View360' 이라는 오픈소스이며, 네이버에서 제작하였다. 이 오픈소스는 다양한 프레임워크에서 사용할 수 있는데 Vue.js도 그 중 한개로 선정되어 있어서 적합하다고 생각했다. 360도 파라노마 이미지를 웹에 넣어 볼 수 있도록 해주고 각 이미지마다 위치를 잡아서 이동할 수 있는 플로팅 버튼을 넣을 수 있는 기능을 제공해준다. 위 사진의 오픈소스 시연사진처럼 플로팅 버튼 혹은 글씨를 띄울 수 있다.

주된 클라우드 서비스로 네이버 MYBOX, 구글 포토, 구글 드라이브 등이 있는데 이러한 서비스들은 사내 자체 서버를 통해 직접 운영되고 있으며 이러한 작업들을 라즈베리파이를 통해 직접 만든다고 생각하면 된다

그렇다면 왜 NextCloud를 사용하는 것일까?

NextCloud란

방금 설명했듯이 네이버 MYBOX 같은 서비스들은 사내 서버를 통해 직접 서버를 구동시켜 고객들에게 서비스 해주는 방식인데 이것을 직접한다고 하였다. 직접 만들기 위해서는 운영체제, 네트워크 개념 등 다양하게 알아야 할 부분들이 많지만, 이러한 부분들을 모두 만들어 놓은채로 편리하게 구성된 GUI를 통해 간편하게 구성하는 것이 NextCloud이다.

NextCloud는 ownCloud라는 프로젝트에서 파생된 프로젝트이다. NextCloud는 오픈소스 프로그램이며 사설 서버 장치를 통해 활용하여 서버를 구축할 수 있다.

관련된 내용으로는 구글에 "NextCloud"라 치면 다양한 내용들이 나온다.

Raspbery Pi5 이미지 적용

NextCloud 프로젝트에서는 Arm 아키택처(Arm 기반의 CPU)를 위한 운영체제를 직접 이미징해서 제공하고 있다. 따라서 제공된 이미지 파일을 통해 라즈베리파이에 적용시킬 것이다. NextCloudpi 페이지를 접속하면 오픈소스 프로젝트를 확인할 수 있다. 이 프로젝트에서 활발하게 Arm 아키택처에 맞는 프로그램이 미리 설치되어 있고 NextCloud도 설치되어 있기에 페이지에 접속해 사이트에서 설정만 하면 된다.

위 사진의 Releases의 최신 릴리즈를 누르면 Raspberry Pi 5를 지원하는 업데이트가 있는 것을 볼 수 있다.

위 사진을 통해서 알 수 있고 하단으로 내리면 Assets 항목에 다양한 SBC를 지원하면서 RaspberryPi5 파일이 있는 것을 알 수 있다. 이 파일을 다운로드하여 라즈베리파이에 씌워주면 된다.

라즈베리파이에 넣어주기 위해서는 이미저 프로그램을 설치해야 한다. 라즈베리파이 공식 사이트에 들어가면 다음과 같이 이미저를 다운로드 할 수 있다. 여기서 맞는 운영체제의 프로그램을 설치해주면 된다.

설치를 완료하고 열었다면 아래와 같이 먼저 라즈베리파이의 버전을 선택한다. 필자는 이번에(조금 됐지만) 새로나온 라즈베리파이 5 버전을 사용해서 구축한다. 선택하면 운영체제를 눌러 아까 설치한 파일을 열어줄 것이다. 위와 같이 Use custom 버튼을 클릭하고 파일을 선택해준다. 선택을 하고 열기를 누르고 저장소를 선택한다 SD카드를 컴퓨터에 연결하면 위와 같이 메모리가 뜰 것이고, 이미징을 할 SD카드를 선택해주면 된다. 다음 버튼을 누르면 위와 같이 OS커스터마이징 설정이 나오는데, 이런 옵션은 순정 라즈베리파이 또는 우분투에서 사용할 수 있는 기능으로 NextCloudPi 커스텀 운영체제에서는 지원하지 않는 설정이기에 아니요를 누르고 진행하면 된다.

이후 SD카드에 이미징이 완료되면 라즈베리파이에 연결한다. 다음 과정에서는 라즈베리파이를 인터넷에 연결하고 기본적인 세팅 후 외부에서 접속이 가능하도록 제작할 것이다.

SD카드를 컴퓨터에 연결한다.

빈 곳을 클릭해 새 파일을 만들고 파일의 이름은 다음과 같이 설정한다.

wpa_supplicant.conf

파일을 열고 다음과 같은 내용을 추가하면 라즈베리파이에 전원을 인가하였을 때 자동으로 연결된다.

ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1

network={
    ssid="와이파이 명 (SSID)"
    psk="비밀번호"
    key_mgmt=WPA-PSK
}

PUTTY를 설치하여 원격 통신이 가능하다

이전에 스마트 태블릿 보관함을 제작하면서 사용했던 방식인 express 서버에서 socketio 라이브러리를 통해서 라즈베리파이와 통신을 하였다. 이와 같은 방식으로 통신을 하려고 한다.

그렇다면 Socket.io란 무엇인가? 끄투나 웹을 통해서 채팅을 하는 앱 같은 경우에 실시간으로 통신해야 한다. 채팅은 클라이언트와 클라이언트가 실시간으로 통신해야 하기에 중간에 서버가 클라이언트의 메시지를 대상 클라이언트에게 전달해준다. 이렇게 실시간 양방향 통신이 가능하도록 해주는 라이브러리이다. 이를 통해서 express 서버에서 구축한 socketio 서버를 라즈베리파이가 접속하여 실시간으로 센서의 데이터를 송수신할 수 있게 된다.

먼저 express 서버에 socket io 서버를 구축해야 한다.

npm i socket.io

쉘에 위 명령어를 입력해서 라이브러리를 추가한다.

이제 express 서버 코드에 바로 추가해서 사용할 수 있다. 자바스크립트를 사용하였으며 commonjs모듈을 사용하였습니다. 페이지 표시하는 코드는 제외하였습니다 (원하시는 일부분의 코드만 가져가서 사용하시면 됩니다)

const express = require('express') // express 라이브러리 선언
const socketIO = require('socket.io') // Socket 라이브러리 선언
// 기존에 http를 선언하지 않고 app.listen 함수를 통해 바로 서버를 실행시킬 수 있는데, 서버 객체를 socket io에 인자로 넣어주어야 하기에 따로 선언을 위해 http 라이브러리를 가져와 선언
const http = require('http')
const bodyParser = require('body-parser')

const app = express()
const port = 3000
const server = http.createServer(app) // Socket io에 서버 객체 전달을 위한 객체 선언
const io = socketIO(server) // Socket io 서버 객체 선언

// 하나의 새로운 클라이언트가 연결되었을 때 실행되는 이벤트
io.on('connection',(socket)=>{
  // socket을 통해서 연결된 클라이언트의 이벤트를 수신할 수 있음
  // 연결된 클라이언트에서 message라는 이름으로 이벤트가 발생하였을 경우 실행
  socket.on('message', (data)=>{
    console.log(data)
  })
})

// express 서버 수신 시작 (위에서 선언한 port의 상수를 통해 포트 설정)
server.listen(port, ()=>{
  console.log("서버가 실행되었습니다")
})

위와 같은 코드를 작성하였다면 이제 라즈베리파이 또는 파이썬 코드를 작성해주어야 합니다. 라즈베리파이를 통해서 센서값을 불러와 파이썬을 통해 express 서버로 전송해줄 수 있다. 최종적으로 express와 라즈베리파이가 서로 통신을 위한 단계라고 볼 수 있다.

파이썬을 통해 socket.io를 사용하기 위해서는 파이썬 패키지를 설치해주어야 한다. 파이썬 패키지는 nodejs처럼 'socket.io'가 아니라 다음과 같은 명령어를 입력해주어야 한다.

pip install python-socketio

위 명령어를 입력하면 파이썬 전용 socket.io 패키지 설치가 진행된다.

설치가 완료되었다면 main.py 파일을 만들어 다음과 같은 코드를 작성한다. 제가 작성한 모든 코드를 공개하지 않고 일부를 공개하여 독자분들께서 어느정도 추출해서 사용하실 수 있습니다.

import socketio
import time

sio = socketio.Client() # socketio패키지의 Client 객체 선언

sensor_value = 0 # 센서 값을 저장해줄 변수 (센서값을 수신하고 저장하는건 미제공)


# 파이썬 socket.io는 다음과 같은 방법으로 이벤트를 수신할 수 있다
@sio.event
def connect():
    print('연결되었습니다')

# 센서값을 기반으로 서버에 전송하기
whie True:
    sio.emit('message',"센서값 : {}".format(sensor_value))
    time.sleep(1) # 1초 이후 다시 반복되도록 (밑에 추가적인 코드가 없으니)

# 연결 할 Socket.io 서버의 아이피 주소
sio.connect('서버의 아이피주소')

# 서버의 데이터 수신 대기
sio.wait()

위와 같이 파이썬 코드를 작성하면 이제 파이썬에서 express로 메시지가 1초씩 송수신 될 것이다.

이렇게 해서 라즈베리파이를 기반으로 작성한 socket.io를 활용한 데이터 통신이였습니다. 이벤트의 송신 수신은 양측에서 가능하기에 emit 함수만 사용해서 사용가능합니다

내용에 오류가 있거나 보충 의견이 있으시다면 언제나 말해주세요

데이터베이스에 저장하는 부분은 구현하지 않았다. 조만간 구글의 Firebase를 통해 구현 할 예정이다.

먼저 파이썬을 통해 구현을 하였다. 다음의 라이브러리를 사용하였고, 라이브러리를 사용하기 위해 사용 가능한 지문인식 센서는 다음과 같다. ZFM-20, ZFM-60, ZFM-70, ZFM-100, R302, R303, R305, R306, R307, R551, FPM10A 위 지문인식 모델들에서 사용이 가능하다. 필자는 R307 모델을 사용하였다 (프로세서는 AS608) 먼저 쉘을 통해 라이브러리를 설치한다.

pip install pyfingerprint

위와 같이 입력하면 설치가 진행된다. 이제 라즈베리파이와 지문인식 센서를 결선할건데 다음과 같이 결선을 하면 된다. TX와 RX를 잘 보고 결선해야한다. 위 처럼 결선하고 다음의 명령어를 입력한다

ls -al /dev |  grep serial

다음과 같이 ttyAMA0이 나오면 정상적으로 결선이 완료된 것이다. 이제 코딩을 진행하면 된다.

import time # 기다리기를 위해 참조
from pyfingerprint.pyfingerprint import PyFingerprint # 지문인식 라이브러리
try:
    f = PyFingerprint('/dev/ttyAMA0',57600, 0xFFFFFFFF, 0x00000000) # 지문인식센서와 통신
    if(f.verifyPassword() == False):
        raise ValueError('Password wrong!')
except Exception as e:
    print(str(e))
    exit(1)

try:
    print('Waiting for finger...') # 지문 기다리기 안내
    while(f.readImage() == False): # 지문 인식될때까지 기다리기
        pass
    f.convertImage(0x01) # 인식 된 지문을 버퍼 0x01 주소에 저장
    characterics = str(f.downloadCharacteristics(0x01)).encode('utf-8') # 0x01에 저장된 값을 문자열로 변환
    print(characterics) # 문자열로 변환한 지문 값을 출력
except Exception as e:
    print('error')
    print(str(e))
    exit(1)

time.sleep(1)

try:
    print('Verifying for finger...') # 위에서 인식한 지문과 일치한지 검사 시작
    while(f.readImage() == False): # 지문 인식 기다리기
        pass
    f.convertImage(0x01) # 인식 된 지문을 버퍼 0x01주소에 저장
    print(f.uploadCharacteristics(0x02,eval(characterics))) # 이전에 입력한 지문을 0x02주소에 넣고 출력
    score = f.compareCharacteristics() # 0x01 지문과 0x02 주소의 지문을 비교
    print(score) # 일치율 출력
except Exception as e:
    print('error')
    print(str(e))
    exit(1)

위와 같이 하면 다른 손가락은 일치율이 0이 나오고 손가락은 같고 위치만 바뀌었을때는 60이상 출력된다.

@override
Widget build(BuildContext context){
return Row(children: [
    Expanded(
        child:Container(
            color: const Color.fromRGBO(36, 111, 255, 1),
            padding: const EdgeInsets.only(bottom: 15),
        child: const Column(children: <Widget>[
          SizedBox(height: 20),
          Stack(
            children: [
              Positioned( // 절대 위치를 통해 배치한다.
                left: 20, // 왼쪽 여백 20만큼 주기
                child: Text(
                  '학교명',
                  style: TextStyle(fontSize: 20, fontFamily: 'LINE', fontWeight: FontWeight.w700,color: Colors.white),
                ),
              ),
              Center(
                child: Text(
                  '자율학습 출석 관리 시스템',
                  style: TextStyle(fontSize: 24, fontFamily: 'LINE', fontWeight: FontWeight.bold,color: Colors.white),
                ),
              ),
            ],
          ),
        ]),
      )),
    ]);

위와 같이 구현할 수 있는데 Stack 위젯 안에 포함된 위젯은 다음 위젯을 추가 할수록 스택으로 쌓이기 때문에 다음 위젯의 위치를 고려할 필요가 없다. 그래서 Stack 위젯 안에 Positioned 위젯을 통해 절대 위치를 잡아주고 그 다음 위젯은 Center 위젯으로 감싸서 가운데 배치를 해주었다.

먼저 IoT란 Internet of Things라는 뜻으로 사물이 인터넷으로 연결되는 것을 의미한다. 이렇게 사물에 인터넷을 연결하기 위해서는 사물을 작동시킬 수 있고 인터넷과 연결될 수 있는 제어 보드가 필요하다. 여기에 적합한 보드 중 아두이노 ESP32라는 와이파이 모듈이 탑재되어 공식 사이트에서 구매할 수 있는 보드도 있지만, 돈이 많지 않기에 비슷한 모델을 선택했다. 중국에 있는 테그선전이라는 회사에서 제작한 ESP32 Goouuu 개발보드를 사용한다.

위 사진과 동일하게 생겼고 ESP32 칩에 연결할 수 있는 핀들을 쉽게 결선할 수 있고 전원 공급과 코딩을 쉽게할 수 있도록 제작된 보드이다.

이 보드를 통해 릴레이를 사용하거나 서보모터를 이용하여 방의 전등 스위츠를 조작할 수 있다.

릴레이란 높은 전압을 입력받아 수도꼭지가 열리듯이 신호를 주면 스위치가 열려 이어진 선으로 전류가 흐르게 되는 모듈이다. 이러한 릴레이 모듈을 사용하게 되면 방에 있는 스위치를 뜯어서 220V 전선 작업을 해야하므로 위험요소가 많다. 따라서 나중에 기회가 된다면 충분한 지식을 가진 상태로 릴레이로 전원을 작동시켜볼 것이다.

그래서 이번 포스팅에서는 서보모터를 이용하여 스위치를 제어할 수 있도록 제작하기로 하였다.

먼저 서보모터와 ESP32 보드를 서로 연결시켜주어야 하는데 아래 결선도와 같이 결선해주었다.

위 사진과 같이 ESP32 칩 G27번핀에 서보모터를 연결하고 G15에 네오픽셀을 결선해주었다. 이때, 네오픽셀은 Dout가 아닌 Din으로 연결해주어야 함을 유의해야 한다.

기존에는 서보모터를 돌려 스위치를 작동시켜 켜고 끌 예정이였지만, 추가적으로 침대 쪽에 네오픽셀을 달아 무드등을 구현해주려고 네오픽셀을 추가하였다.

이제 ESP32 칩에 코드를 작성하여 플래쉬를 하기 전 IoT 작업을 미리 해야한다. IoT를 위해서는 서버가 필요한데 대표적으로 아두이노에서 IoT를 구현할 때 사용하는 서버는 Arduino IoT Cloud와 Blynk가 있다. 저자는 Blynk를 사용하여 IoT를 구현하고자 한다.

https://blynk.cloud 주소로 들어가면 다음과 같이 로그인을 해야한다.

로그인을 완료하면 템플릿(프로젝트)을 하나 만들어주어야 한다. Blynk에서 템플릿은 각 디바이스에서 사용할 수 있는 핀들과 다양한 정보들을 정의하는 공간이라고 볼 수 있다. 우측 상단에 New Template 버튼을 클릭하여 새로운 템플릿을 제작한다. 먼저 기본적으로 템플릿의 이름을 지정하고 중요한 부분은 HARDWARE(하드웨어)와 CONNECTION TYPE(연결 방식)이다.

하드웨어는 ESP32 칩을 통해 Bylnk 와 통신을 해줄 것이기 때문에 ESP32로 지정하고 연결 방식은 특별한 방식이 아니라면 WiFi로 설정한다. Description(설명)은 굳이 작성하지 않아도 된다. 새로운 템플릿을 만들게 되면 다음과 같이 Datastreams(데이터 스트림) 등을 설정할 수 있는 화면이 나온다. 이제 서보모터와 네오픽셀을 작동시킬 가상 핀을 구성해야 한다. 여기서 가상핀이란 아두이노나 ESP32에 센서와 통신할 수 있는 핀이 있듯이 Blynk에서는 보이지 않는 가상 핀을 만들어 센서 값이나 대시보드의 값을 ESP32 또는 아두이노와 통신하기 위한 것이다. Datastreams 탭으로 들어가면 다음과 같이 새로운 데이터스트림을 제작할 수 있다. New Datastream을 눌러 Virtual Pin(가상 핀)을 클릭하여 가상 핀을 만든다. 먼저 첫 번째 가상 핀의 이름은 불을 껐다 켤 수 있도록 Light로 한다. 여기서 중요한 것은 값을 어떤 형식으로 가져오고 최소 최대 값을 미리 지정해야한다는 것이다. DATA TYPE(자료 유형)은 Integer로 정수형 데이터만 송수신할 수 있도록 지정하고, MIN(최소값) MAX(최대값)은 각각 0과 1로 지정한다. 0과 1로 지정을 하면 참과 거짓을 쉽게 나눌 수 있기 때문이다. 이를 통해서 버튼을 눌러 활성화되면 ESP32에 1이 전송되고 한번 더 누르면 비활성화되어 0이 전송된다. 그렇다면 DATA TYPE(자료 유형)을 Boolean(부울) 형식으로 바꾸면 되지 않느냐는 의문을 가질 수 있지만, Blynk에서 지원하는 가상 핀의 자료형은 Integer(정수형), Dobule(부동소수점), String(문자형) 3가지만 지원하기에 Boolean을 구현할 수 있는 자료형은 Integer이 적합하기에 Integer을 통해 Boolean 자료형의 방식을 구현한다. 다음과 같이 두 가지 가상 핀을 제작한다. (Light, Servo) 두 가상 핀은 동일한 자료형과 최소 최대값을 가지고 있어야 한다. Servo핀은 서보모터를 움직일 수 있게 하기 위한 핀이다. (주의할 점은 Servo에 각도 값을 넣는 것은 프로그래밍 과정에서 작성해야 하고 여기서는 편의를 위해서 0,1로 데이터를 전송하고 ESP32에서 지정된 값만큼 움직일 수 있도록 구현한다)

이제 우측 상단에 Save 버튼을 클릭해서 템플릿 데이터를 저장한다. 좌측 Devices 탭으로 들어가서 새로운 디바이스(기기)를 하나 만들어준다. 우측 상단의 New Device 버튼을 클릭하여 새로운 디바이스를 만들 수 있다. 새로운 디바이스를 만들기 위해서는 아래와 같이 템플릿에서 가져올 것인지 직접 입력한 것인지 물어본다. 하지만 이전 단계에서 템플릿을 구현하였기에 From template 버튼을 클릭하여 다음 단계로 이동한다. From template 버튼을 클릭하여 어떤 템플릿을 사용하여 기기를 제작할 것인지 물어보는데 다음과 같이 이전에 제작한 Velog(이름이 다를 수 있음)라는 템플릿을 사용하여 Velog라는 기기를 제작할 수 있다. 기기명은 템플릿 명과 기본적으로 동일해지지만 직접 변경할 수 있다. 디바이스를 제작하면 다음과 같이 기본적인 대시보드와 업타임을 확인할 수 있는데, 현재 대시보드에 할수 있는게 없다. 웹 대시보드에서 ESP32를 제어하는 방법도 있지만 이 글에서는 모바일 Blynk에서 작동을 구현할 것이다. 따라서 휴대전화에 스토어에 들어가 Blynk를 검색하여 어플리케이션을 다운로드 해준다. (안르도이드 스토어에서도 있다) 설치를 마치고 열면 로그인 후 다음과 같이 제작한 디바이스가 보인다. 제작한 디바이스인 Velog를 터치하여 설정을 해줄 것이다. 우측 상단 초록색 배경의 설정 모양 버튼을 터치하면 대시보드를 꾸밀 수 있는 화면으로 전환되고 하단의 +버튼을 터치하면 Button을 터치하여 새로운 버튼을 하나 만들어준다. 새로 만든 버튼을 하나 누르면 버튼에 대한 동작을 설정할 수 있는데 위 사진과 같이 DataStream을 Light로 해주고 MODE를 Switch로 설정한다. 따라서 방금 제작한 버튼은 Light(불)을 제어할 수 있는 버튼이 된 것이고 Switch로 설정하여야 눌렀을 때 ON(켜짐) 상태가 유지된다. 동일한 방법으로 Servo 버튼도 제작한다. 위 사진과 같이 버튼 두개를 제작해주었다면 좌측 X버튼을 클릭해 나간다. 이제 Blynk 기본 설정을 마쳤다. 마지막 단계인 프로그래밍을 통해 ESP32에 소스코드를 작성하여 플래쉬 해주겠다.

아두이노 IDE가 기본적으로 설치되어 있다는 전제로 작성하였습니다.

(아두이노 2.0.0 버전 이상 기준) 아두이노 IDE를 실행하고 우측 라이브러리를 다운로드 받을 수 있는 탭으로 이동한다. 검색창에 위와 같이 Blynk를 입력하여 Volodymyr Shymanskyy가 제작한 라이브러리를 다운로드 한다. 다운로드를 완료하면 다음과 같이 File -> Examples -> Blynk -> Boards_WiFi -> ESP32_WiFi 예제를 클릭해서 열어준다. 위와 같이 코드가 나오는데 ESP32에서 네오픽셀과 서보모터를 작동시키려면 추가적인 라이브러리가 필요하다. https://github.com/RoboticsBrno/ServoESP32/releases/tag/v1.1.1 깃허브로 들어가 Source code 버튼을 클릭하여 라이브러리를 다운로드 하고 라이브러리 매니저에 neo pixel 를 검색하여 Adafruit가 제작한 라이브러리를 설치해준다. 다시 Blynk 홈페이지에서 디바이스를 누르고 Device Info 버튼을 클릭하여 Firmware Configuration(펌웨어 구성요소)을 복사한다. (각각의 디바이스마다 다르므로 주의하세요) 이제 아래의 코드를 이해하면서 입력하여 보드에 업로드를 해준다.

/* Device에 Device Info탭에 있는 Firmware Confirguration 항목에 있는 내용 붙여넣기 */
//#define BLYNK_TEMPLATE_ID           "TMPxxxxxx"
//#define BLYNK_TEMPLATE_NAME         "Device"
//#define BLYNK_AUTH_TOKEN            "YourAuthToken"

/* 라이브러리 정의 */
#include <WiFi.h> // Blynk 작동을 위한 필수 라이브러리
#include <WiFiClient.h> // Blynk 작동을 위한 필수 라이브러리
#include <BlynkSimpleEsp32.h> // Blynk 작동을 위한 필수 라이브러리
#include <Adafruit_NeoPixel.h> // 네오픽섹을 사용하기 위한 라이브러리
#include <ESP32_Servo.h> // ESP32에서 서보모터를 사용하기 위한 라이브러리

// 연결할 와이파이 설정
char ssid[] = "와이파이 이름";
char pass[] = "와이파이 비밀번호";

#define PIN 15 // 네오픽셀이 결선 된 핀 번호
#define NUM 30 // 연결 된 내오픽셀의 픽셀 개수

static const int servoPin = 27; // 서보모터의 핀 번호

Servo servo1; // 라이브러리의 Servo를 servo1으로 객체 정의
Adafruit_NeoPixel pixels = Adafruit_NeoPixel(NUM,PIN, NEO_GRB + NEO_KHZ800); // 네오픽셀을 사용하기 위해 네오픽셀 클래스 가져오기, 괄호에는 클래스를 가져오기 위한 필수 인자들이 기입되어 있음.

void setup()
{
  // 디버깅 콘솔 (9600보레이트로 통신)
  Serial.begin(9600);


  Blynk.begin(BLYNK_AUTH_TOKEN, ssid, pass); // Blynk 시작
  pixels.begin(); // 네오픽셀 시작

}

void loop()
{
  Blynk.run(); // Blynk 데이터 송수신
}

// 가상핀 V0번에 쓰기 이벤트 발생 시 실행되는 함수
BLYNK_WRITE(V0)
{   
  int value = param.asInt(); // 전송 된 가상핀의 값을 value라는 변수에 저장
  servo1.attach(servoPin); // 서보에 전원 인가
  if(value == 1){ // 전송 값이 1이라면
    servo1.write(180); // 서보 180도 회전
  }else servo1.write(0); // 아니라면 0도 회전
  delay(500); // 500ms 기다린 후
  servo1.detach(); // 서보 전원 해제

}

// 가상핀 V1번에 쓰기 이벤트 발생 시 실행되는 함수
BLYNK_WRITE(V1)
{   
  int value = param.asInt(); // 전송 된 가상핀의 값을 value라는 변수에 저장
  if(value == 1) static1(255, 111, 0); // static1 함수를 실행키기 (부드러운 노란색)
  else static1(0,0,0); // static1 함수를 실행시켜 네오픽셀 R,G,B 값을 각각 0,0,0으로 설정
}

// 네오픽셀을 제어하기 위한 함수
void static1(int r, int g, int b) { // R,G,B 인자 가져오기
  for (int i = 0; i <= NUM; i++) { // 네오픽셀 개수만큼 켜주어야 하기에 반복문
    pixels.setPixelColor(i, pixels.Color(r, g, b)); // 네오픽셀 반복문 주소에 인자로 받은 값들을 빛으로 표현
    pixels.show(); // 설정된 픽셀을 보여주기
  }
}

위와 같이 코드를 작성하면 다음 영상처럼 작동한다. https://youtu.be/_S13KnjoMeQ

이 포스팅에서는 Vue-router라는 개념을 이해하였다는 전재로 작성되었다.

Firebase에서는 서버 또는 웹 환경에서 서비스를 사용할 수 있도록 npm 모듈 형식으로 제공하고 있다. Vue.js 프로젝트에서 다음과 같이 설치를 진행할 수 있다.

$ npm install firebase

또한 Vue.js에서 Firebase를 편리하게 사용할 수 있도록 VueFire라는 모듈을 추가로 제공하고 있다.

$ npm install vuefire

VueFire를 사용하기 위해서는 firebase도 꼭 설치가 되어있어야 한다. 위 모듈을 설치하기 위해서는 Vue.js 프로젝트에서 실행하여야 한다.

설치를 완료하면 새로운 프로젝트를 생성하여야 한다. 여기를 눌러 Firebase 콘솔로 이동해준다.

다음과 같은 페이지가 나오면 프로젝트 추가 버튼을 클릭해서 새 프로젝트를 만드는 과정을 시작한다.

새 프로젝트를 만들기 위해서는 프로젝트 이름을 입력해준다. 이름은 자신이 원하는 이름으로 해도 무관하다. Firebase로 만든 서비스의 동작 동향을 분석해주는 애널리틱스 사용 여부를 확인한다. 만약 프로젝트에서 사용한다고 하였으면 다음과 같이 애널리틱스 계정을 선택하면 된다. 이제 프로젝트 만들기 버튼을 클릭해서 프로젝트를 생성해준다. 프로젝트를 생성하면 다음과 같이 프로젝트 화면이 나오면서 새로운 앱을 추가시킬 수 있다. 우리는 Vue.js를 사용하여 웹 애플리케이션을 제작하고 있으므로 </>아이콘의 웹 버튼을 클릭하면 된다. 웹 앱을 Firebase에 추가시키기 위해서 웹 이름을 입력해준다. (추가로 Firebase에서 웹 호스팅도 가능하다) 웹 이름을 입력하면 새로운 앱이 등록이 되면서, 추후 코드에 들어갈 Firebase 설정 값들을 제공해준다. 이 값들은 생성화면 뿐만 아니라 프로젝트 설정에서도 받을 수 있다.

Vue.js 프로젝트로 돌아와서 src폴더에 새로운 폴더를 "firebase"라는 이름으로 하나 만들어주자 폴더 안에 새로운 "index.js"라는 이름으로 파일을 만들어주자 만들어주었으면, Firebase에서 앱을 등록하여 나온 설정값을 등록하는 코드를 복사하여 파일에 붙여준다.

src/firebase/index.js

import { initializeApp } from 'firebase/app'; 

// firebase를 사용하기 위한 기본정보
const firebaseConfig = {
    apiKey: "",
      authDomain: "",
      projectId: "",
      storageBucket: "",
      messagingSenderId: "",
      appId: "",
      measurementId: ""
};

export const firebaseApp = initializeApp(firebaseConfig); 

위와 같이 코드를 작성해주면 마지막줄에 firebaseApp라는 객체를 내보내서 main.js 파일에서 사용할 것이다.

src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { VueFire,VueFireAuth } from 'vuefire'
import { firebaseApp } from './firebase' 

const app = createApp(App)
app.use(VueFire,{
  firebaseApp, 
  modules:[
    VueFireAuth(), 
  ]
})
app.mount("#app")

위 코드에서는 3번째 줄에 VueFire를 Import 해주었다. VueFire 모듈에서 내보낸 모든 객체를 가져오지 않고 중괄호를 열어 필요한 객체만 가져온 것을 볼 수 있다. 그 다음줄에서는 방금 만든 firebase/index.js를 통해서 firebaseApp 객체를 가져왔다.

(여기서 index.js 경로를 생략한 이유는 index.js라는 이름이 기본 실행 파일이므로 저런식으로 폴더만 가져와도 자동으로 index.js에서 파일의 내용을 가져오게 된다)

라즈베리파이 nano 텍스트 편집기로 아래의 경로의 파일을 열어준다.

sudo nano /etc/rc.local

위 파일에서 제일 하단으로 이동한다 (Ctrl+W -> Ctrl+V)

[ 실행코드 입력 ]
exit(0) 

[ 실행코드 입력 ] 부분에 실행할 코드를 입력하면 된다.

rc.local 시스템이 시작하자 마자 작동하는 프로그램들이 작성되어 있다. 시작하자 마자 실행이 되기 때문에 GUI에 접근할 수 없다.

고정하고 싶은 마음에 element style에 position:absolute를 적용하고 가운데로 배치하기 위해서 다음과 같이 스타일을 추가하였다.

아래 코드를 추가하여

 <div v-show="isHidden" style="position: absolute; left: 50%; transform:translateX(-50%); margin-top: 20px;">
     <img style=" width: 100px;" src="../assets/fingerprint.png" />
</div>

다음과 같이 이미지가 표시되었든 표시가 되지 않았든, 아래 텍스트가 고정되어있는 것을 볼 수 있었다.

*1. Firebase 데이터베이스 접근하기 *

해당 예제는 Firebase 서비스의 일부인 RealTime Database 서비스를 이용합니다

필요 프로그램 : Visual Studio Code

관계형 데이터베이스와 비관계형 데이터베이스에 대한 이해를 하고 진행합니다.

RealTime Database는 대중적인 방식인 SQL(Structured Query Language: 관계형 데이터베이스)을 사용하지 않고 NoSQL(Not Only SQL) 종류 중 하나인 Document(문서형)의 JSON(Javascript Object Notation) 방식을 사용하여 저장합니다. 따라서 관계형 데이터베이스와 다르기 때문에 이해가 관계형 데이터베이스가 익숙한 사람에게는 RealTime Database를 이해하는데 시간이 걸릴 수 있습니다.

RealTime Database를 사용하기 위해서는 여기를 클릭해서 아래의 사이트로 이동 후 프로젝트 추가 버튼을 클릭합니다 첫 번째로 프로젝트 이름을 입력하라고 합니다.

아무 이름이나 작성 후 계속을 클릭하고 애널리틱스에 대한 내용도 확인을 하고 계속을 클릭하고 애널리틱스 구성 화면에서 Default Account for Firebase 버튼을 클릭하고 프로젝트 만들기 버튼을 클릭합니다 새 프로젝트가 생성이 되었다면 좌측에 빌드 항목으로 들어가서 RealTime Database 버튼을 클릭합니다 클릭하여 데이터베이스 만들기 버튼을 클릭하고 데이터베이스가 위치할 지역을 선택하고 다음을 클릭합니다 잠금 모드로 시작을 선택하고 사용 설정을 클릭합니다. 위와 같은 화면이 데이터베이스가 저장되는 부분의 화면입니다 데이터베이스가 저장되는 항목의 상단에는 데이터베이스 링크가 있습니다 좌측 상단의 톱니바퀴 설정 버튼을 클릭하고 서비스 계정으로 이동합니다

Firebase Admin SDK가 기본적으로 선택이 되면 Admin SDK 구성 스니펫에서 Python 항목을 선택합니다 그리고 새 비공개 키 생성을 클릭합니다 키 생성을 누르면 새로운 키가 생성이 되고 다운로드가 됩니다

이제 Visual Studio Code를 실행하고 상단 메뉴에서 터미널(T) 메뉴를 누르고 새 터미널 버튼을 클릭합니다. 그럼 새 터미널이 하단에 생성됩니다. 아래의 Firebase SDK 설치 과정을 진행해주세요 (pip3 라는 명령어를 인식하지 못할경우 윈도우 환경변수를 추가해주세요 Python버전\Scripts)

pip3 install --upgrade pip #파이프를 업그레이드 합니다
pip3 install firebase_admin #firebase admin 라이브러리를 설치합니다
pip3 install pyserial # 시리얼 통신을 위한 라이브러리 설치

새로운 파일을 만들고 이름은 원하는 이름으로 하되 확장자를 .py로 지정해주세요 이전에 받은 키 파일을 코드파일과 같은 폴더로 이동시켜주세요 아래의 코드를 입력해주세요

[ 예제1 마이크로비트와 통신하기 ]

1. 파이썬 코드

COM12 부분을 장치 관리자 -> USB 직렬 장치(COMXX) 의 번호로 변경해야 합니다

import serial
# 시리얼 통신 설정
serial1 = serial.Serial("COM12",9600,timeout=1) # 마이크로비트의 포트 번호와 보드 통신 속도를 통해 포트를 열기

# 무한반복
while True:
    microbitData = str(serial1.readline().decode('utf-8')) # 시리얼에서 한줄을 읽고 utf-8로 디코딩을 진행 (디코딩을 하지 않으면 b''와 같은 형식으로 출력됨)
    if microbitData != "": # microbitData 변수에 문자가 있는지 확인
        print(microbitData) # 받은 문자열을 출력

serial1.close()

2. 마이크로비트 코드

<div style="position:relative;height:calc(300px + 5em);width:100%;overflow:hidden;"><iframe style="position:absolute;top:0;left:0;width:100%;height:100%;" src="https://makecode.microbit.org/---codeembed#pub:_9J9XdD873Fgo" allowfullscreen="allowfullscreen" frameborder="0" sandbox="allow-scripts allow-same-origin"></iframe></div>

위 코드를 실행하면 마이크로비트에서 A버튼을 눌렀을때 파이썬 터미널에 Hello World가 출력되는 걸 볼 수 있습니다. (코드는 python 또는 python3 파일명.py로 실행합니다)

2. 결과

[ 예제2 마이크로비트의 데이터를 저장하기 ] 데이터베이스의 저장은 Key-Value(키-값) 형식입니다. 따라서 아래의 코드를 실행하면 Python(키) 아래에 Hello World(값) 라는 값이 저장됩니다

1. 파이썬 코드

import serial
import firebase_admin
from firebase_admin import credentials
from firebase_admin import db

# Firebase RealTime Datebase 설정
cred = credentials.Certificate('serviceAccount.json') # 이전에 받은 키의 저장 위치(/path/serviceAccount.json)
firebase_admin.initialize_app(cred, {
    'databaseURL': 'https://--.rtdb.firebaseio.com' # 이전에 본 데이터베이스 주소
})
ref = db.reference('') # 데이터베이스 위치

# 시리얼 통신 설정
serial1 = serial.Serial("COM12",9600,timeout=1) # 마이크로비트의 포트 번호와 보드 통신 속도를 통해 포트를 열기

# 무한반복
while True:
    microbitData = str(serial1.readline().decode('utf-8')) # 시리얼에서 한줄을 읽고 utf-8로 디코딩을 진행 (디코딩을 하지 않으면 b''와 같은 형식으로 출력됨)
    if microbitData != "": # microbitData 변수에 문자가 있는지 확인
        ref.set({
            'Python':microbitData
        })
        print("데이터 저장완료") # 받은 문자열을 출력

serial1.close()

2. 마이크로비트 코드

<div style="position:relative;height:calc(300px + 5em);width:100%;overflow:hidden;"><iframe style="position:absolute;top:0;left:0;width:100%;height:100%;" src="https://makecode.microbit.org/---codeembed#pub:_9J9XdD873Fgo" allowfullscreen="allowfullscreen" frameborder="0" sandbox="allow-scripts allow-same-origin"></iframe></div>

3. 결과

마치며

이렇게 해서 마이크로비트와 시리얼 통신을 이용해서 Firebase의 RealTime Database 서비스를 이용하는 방법에 대해서 알아보았습니다.

결론으로 마이크로비트에서는 시리얼 통신 값을 통해서 데이터를 입력받고 데이터를 가공해서 실시간 데이터베이스에 업로드하는 방식이었습니다.