기술연구

김경현 2019. 12. 4. 04:50

안녕하세요.


기술이 공유되지 않으면 미래의 사회는 지금보다 더욱 폐쇄적이고 불평등한 사회가 될 것입니다. 카피레프트(copyleft)는 개인의 지적재산권을 중시하는 기존의 카피라이트(copyright)에 대항해 사회적 공유를 강조하는 정신이자 운동입니다. DIY연구소는 카피레프트(copyleft) 정신과 4차 산업기술의 확산을 위하여 연구한 내용을 무료로 배포하고 있습니다. 오늘은 조코딩 선생님의 동영상 공부후 물체인식 프로그램 개발을 위한 3D프린터 로봇제어를 위한 티처블머신 (인공지능) 내용을 공유합니다.


[1] [2] [3] [4] [5]





☞ 앱인벤터

☞ 앱인벤터로 애니메이션 만들기 (이론)

[교육내용]


☞ 30. 3D프린터 로봇제어를 위한 라즈베리파이

☞ 31. 3D프린터 로봇제어를 위한 AI 인공지능

☞ 32. 3D프린터 로봇제어를 위한 AI 스마트미러

 33. 3D프린터 로봇제어를 위한 블루투스 앱

 42. 앱인벤터로 애니메이션 만들기 (이론)

 53. 3D프린터 로봇제어를 위한 교육앱 (대기오염, 리스트)

 54. 3D프린터 로봇제어를 위한 교육앱 (로봇 음성제어)

 55. 3D프린터 로봇제어를 위한 딥러닝 (인공지능)

☞ 56. 3D프린터 로봇제어를 위한 텐서플로 (인공지능) 




[3D프린터 로봇제어를 위한 티처블머신 (인공지능)]


☞ 코딩자료 : 다운로드





■ 코딩을 배워야 하는 이유


1, 코딩이 정말 쉬워졌다. 

- Python, Ruby, Javascript 등 쉬운언어

- Framework, Cloud, Api 등 다양한 개발도구


2. 아이디오와 운이 좋다면 정말 큰 돈을 벌수 있다.

- Facebook (Framework)

- Flappy Bird (Unity Framework)

- IT 스타트업


3. 실생활에서 굉장히 유용하다.

- 웹서핑, 업무 등에 효율적

- 업무자동화 툴 개발 가능

- IT 개발자로 일 할수 있다.



■ 코딩 공부 순서


1. 프로그래밍 언어 공부부터 시작하는 것은 어려울수 있다.


2. 웹 (Web) 으로 시작하는것을 추천

- 웹이란 브라우저를 통해 접속할수 있는 모든 사이트

- 장점 1. 인터넷을 사용해 보았다면 누구나 익숙함.

- 장점 2. 난이도가 상대적으로 낮음.

- 장점 3. 개발에 필요한 도구가 많음

- 장점 4. PC, 스마트폰, 태블릿, TV 등 다양한 기기에서 동작함.


3. 개발은 크게 프론트엔드 / 백엔드로 나눌수 있음

- 프론트엔드는 우리가 보는 화면처리 (ex. 로그인 화면)

- 백엔드는 DB 조회등 로직처리 (ex. ID/PW 확인 로직)


4. 프론트 엔드부터 시작하는 것을 추천

- 코딩한대로 화면에 바로바로 표시되어서 재미있음

- HTML (연필), CSS (물감), Javascript (플립북) 로 구성됨

- HTML + CSS -> JS -> 언어 -> 프레임워크


5. 프론트엔드만 할줄 알아도 API 를 잘쓰면 쓸만한 서비스 만들수 있음

- API : 미리 만들어 놓은 가져다 쓸수 있는 기능


6. 백엔드부터는 본격적으로 개발 언어가 사용됨.

- 쉬운 코딩 언어로 기본만 익히고 시작 :

- 변수, 조건문, 반복문, 함수만 알아도 웬만한건 만들수 있음

(1) 변수 : ~는 ~다 의 개념 : ex) ID = 'kimgyunghyun'

(2) 조건문 : 만약 ~라면 : ex) ID/PW 가 일치하면 로그인 성공표시

(3) 반복문 : ~를 n번 반복해라 : ex) 앞으로 이동 10번 반복

(4) 함수 : a를 넣으면 b가 나옴 : ex) 공격력이 5 이면 데미지가 50


7. 프레임워크 : 개발을 도와주는 도구 모음

- 프레임 워크를 활용해서 만들고 싶은 서비스를 만드세요


8. 웹 개발을 도와주는 다양한 프레임워크가 존재함


9. 개인적으로 처음 시작할때 Ruby on Rails 추천

- 적게 배우고도 많은 것을 빠르게 구현할수 있음


10. 만들고 싶은 웹 서비스를 만들면서 공부하면 빠른속도로 실력이 성장함.



■ 코딩 기본용어


1. 코딩 : 컴퓨터에게 명령하는 것


2. 프로그래밍 언어 : 컴퓨터에 명령하는 언어



3. 프레임워크 : 코딩을 쉽게 할수 있도록 도와주는 도구 모음

- 용도별, 언어별 다양한 프레임워크 존재함



■ 코딩 필수환경 세팅


1. 브라우저 설치하기 : ☞ 크롬



2. 코드 에디터 설치하기 (메모장 + 추가기능) : ☞ Visual Studio Code




■ HTML 태그 이해 네이버 해킹


HTML 은 웹의 프론트엔드 (Front-End), 즉 우리가 보는 화면을 구성하는 언어다. 웹페이지 구조가 어떻게 되어있는지 알수있는 언어로 HTML 은 Hyper Text Mark up Language 클릭했을때 다른페이지로 넘어갈수 있는 링크 = 하이퍼텍스트 (Hyper Text) 로 구성된 구조를 표시하는 = 마크업 (Mark up), 언어 = 랭귀지 (Language) 라는 뜻이다. 예전에는 여러 웹들을 연결해주는 역할을 수행하는 언어였다. 그러나 요즘은 어플리케이션, 게임등 다양한 분야에 활용될수 있는 아주 유용한 언어이다. 마치 테트리스처럼 블록들을 쌓아서 어떤 웹페이지를 구성하는 어떤 웹페이지를 구성하는 형태이다. 여기서 블록들을 태그라고 부르며 <태그이름> 내용 </태그이름> 으로 구성한다. 다양한 기능을 가진 태그들을 쌓아가면서 HTML 을 이용하여 웹브라우저 프론트엔드 (Front-End) 우리가 아는 Naver, Google 이런 웹사이트들을 만들수 있는 것이다. 


  



우리가 보는 웹사이트는 특정부분의 헤더, 기사, 배너 등의 블록으로 나눌수 있다. 나눠진 블록들을 한번 더 세분화하여 나눌수도 있다. 이러한 부분을 HTML 태그로 어떻게 표현하는지 알아본다. 





예로 기사부분을 제목과 기사내용으로 나눌수 있다. HTML 태그중 div 는 Division (분할) 의 약자로 구역을 나눠주는 기능의 태그이다. 화면에 기사라는 큰 틀 안에 제목과 기사내용이 들어간 것처럼 기사라는 큰 디비전 여는 태그와 닫는 태그 사이에 제목이라는 새로운 Division, 그리고 기사내용이라는 새로운 Division 으로 나누어진것을 볼수 있다. 또 제목 안에는 제목을 나타내는 h1 태그 안에 제목이 쓰여이쓴것을 볼수 있다. 기사내용 안에는 굵은 글씨를 나타내는 b 태그 볼드체 안에 기사 머릿말, 그리고 그림을 나타내는 img 태그안에 src 라는 속성을 이용해서 이미지 주소를 넣어준다. 문단을 나타내는 p 태그안에 기사본문의 내용이 들어 있는것을 볼수 있다.  



이처럼 상위태그와 하위태그를 나타낼때 상위태그를 부모태그, 하위태그를 자식태그라고 부른다. 실제 웹사이트가 이런식으로 구성되어 있는지 알아본다. 크롬 브라우저를 통해 네이버 뉴스 사이트에 접속한다. 여기서 HTML 코드를 살펴보려면 [F12] 버튼을 누른다. 그러면 개발자 도구가 뜨게 되고 현재 웹페이지의 html 문서를 개발자 도구를 통해 편리하게 볼수 있다. 측면화살표를 눌러보면 여는 태그와 닫는 태그 사이를 열었다가 접었다가 할수 있어서 부모요소 그리고 자식 요소를 한눈에 보기 쉽게 볼수 있다. 또 상단 화살표를 눌러서 웹페이지 위에 올려놓게 되면 각 요소의 영역이 색깔로 표시되게 되어 편리하게 볼수있다. 앞서 살펴본바와 같이 실제로 위의 헤더영역 그리고 기사영역 그리고 배너영역 이런식으로 나누어지는 것을 확인할수 있다. 여기서 재미있는것은 개발자 도구를 이용해 html 문서를 수정할수 있다는 점이다. 기사제목을 한번 바꿔본다. 제목에 해당하는 태그를 찾아서 클릭한후 우측의 개발자 도구에서 더블클릭하여 내용을 수정한다. '경축 DIY 연구소 1000만 회원 달성'. 이런식으로 치고 엔터를 치면 실제로 기사제목이 바뀌어진다. 놀랍지 않나요? 그리고 글뿐만 아니라 이미지도 수정할수 있다. 이미지를 선택하고 src 영역 안쪽에 주소가 나와있는데 이미지의 주소를 바꾸어본다. 제 블로그에 있는 이미지 주소를 복사후 이미지 주소를 가져온 다음 src 영역에 붙여넣으면 그림이 바뀌어 나온다. 


[뉴스 제목 변경]



[F12 클릭후 제목 수정]



[뉴스 사진 변경]


[F12 클릭후 사진 변경]



[교체용 사진]



[Ctrl + Shift + C 클릭후 사진변경]



[F12 클릭후 검색어 순위 변경]



[Ctrl + Shift + C 클릭후 검색어 수정]




[네이버를 해킹한것은 아님]


Front-End, Back-End 원리 이해가 필요하다. 사용자 컴퓨터는 Front-End 이고, 네이버 서버는 Back-End 이다. 상기 뉴스 제목, 사진, 검색어를 변경한것은 사용자 컴퓨터에서만 변경되어 표시되도록 Front-End 의 HTML 내용을 변경한 것이다. 해커는 네이버 서버 방화벽을 뚫고 진입후 모든 사용자의 컴퓨터에 영향을 주도록 Back-End 의 HTML 내용을 변경하는 범죄 행위이다.




[HTML 강의사이트 추천]


☞ 1. 코드카메디

☞ 2. 생활코딩







■ 내가 만든 사이트 인터넷에 공개하기


1. 내 컴퓨터를 서버로 만드는 방법 : 인터넷에 내 ip 주소를 알린다. 개인컴퓨터 공개로 보안취약. 비추천.

2. 외부 서버를 이용하는 방법 : 서버의 일부를 활용해 내 사이트를 배포한다. 추천.









 웹호스팅


 홈페이지




☞ 홈페이지







 사이트 수정








 수정된 사이트 업로드


☞ 홈페이지








 주소 바꾸기






☞ 김경현 홈페이지




 웹을 앱으로 변환하는 방법


☞ 스윙투앱 홈페이지














■ 티처블머신 (Teachable Machine)


Google 이 최근 발표한 AI 관련 신기술




■ 인공지능 (Artificial Intelligence)


컴퓨터가 인간처럼 스스로 학습하고 행동하는 것. 대표적으로 알파고 (Alpha Go). 인간처럼 혹은 인간보다 더 뛰어나게 학습한 지식을 바탕으로 어떤 판단을 하여 알파고처럼 바둑을 두기도 하고 물체를 식별하기도 하며 요즘은 작곡을 하거나 소설을 쓰기도 한다. 날씨, 주가예측 등 미래를 예측하는 일을 하기도 한다. 











■ 머신러닝 (Machine Learning)


이런 인공지능을 만들기 위해 컴퓨터는 어떤 학습을 해야한다. 이런 학습을 '기계가 학습한다 (Machine Learning)' 라고 부른다. 조금더 세부적으로 들어가면 기계를 학습시키는 머신러닝의 방법중 마치 인간처럼 우리의 신경망을 통한 학습을 모방한 알고리즘이 많이 사용되는데 이러한 알고리즘을 인공 신경망 알고리즘 (ANN) 이라고 부른다. 




■ 빅데이터 (Big Data)


이런 학습에 사용되는 정보를 Data 라고 부르며 이런 Data 가 많으면 Big Data 라고 부른다.





■ 실습 


교육머신 (Teachable Macnine) 을 이용해 이미지를 신경망학습 (Neural Network) 알고리즘을 통해 학습을 시키고, 학습 모델을 생성한다. 여기서 학습모델이란 우리가 학습시킨 결과물을 의미한다. 즉, 이 모델만 있으면 우리가 학습시키지 않은 새로운 Data 가 들어와도 이 모델이 지금까지 학습한 것을 바탕으로 판단을 하여 이 데이터에 대한 판단을 내리게 된다. 여기에 조금의 프로그래밍만 더하면 누구나 실용적인 인공지능 서비스를 만들수 있다. 






■ 티처블머신 (Teachable Machine) : 물체인식 프로그램 개발


☞ 홈페이지







■ 학습


전화기, 에어콘 리모콘, 케이블 리모콘, TV 리모콘을 학습시켜서 컴퓨터가 구분할수 있도록 하는 모델을 만든다. 물체를 Webcam 에 비추고 Hold to Record 버튼을 꾹 누르고 있으면 곟속 물체가 학습되며 저장된다. 다양한 모습의 형상을 담기 위해서 조금씩 변화시켜 가면서 다양한 물체의 모습을 담는다. 약 200 장 정도만 담아 본다. 학습 저장이 끝나면 Class 1 으로 되어 있는것을 'phone1' 으로 고쳐 준다. 같은 방법으로 Class 2 는 'aircon_remocon1', Class 3 는 'cable_remocon1', Class 4 는 'tv_remocon1' 으로 고쳐 준다. 그리고 Train Model 버튼을 눌러 학습 시킨다. 학습 시킬때는 탭을 바꾸면 안되며 학습이 완료되면 테스트 해본다. 예로 전화기를 화면에 비추면 전화기 (phone1) 가 100 % 로 뜬다.






■ 프로그램


이렇게 만든 모델을 다운받아서 자신이 만든 프로그램에 포함해서 사용할수 있다. 상단의 Export Model 을 눌러서 만든 모델을 가져갈수 있다. 모델은 Tensorflow.js 와 Tensorflow, Tensorflow Lite 로도 가져갈수 있다. 텐서플로는 머신러닝을 쉽게 할수 있도록 도와주는 라이브러리로 머신러닝을 자세히 이론적으로 알지 않아도 라이브러리를 사용하면 손쉽게 원하는 머신러닝 프로그램을 만들수 있다. Upload 부분은 이후 설명하고 직접 다운받아 본다. Download my model 버튼을 클릭후 다운 받는데 그러면 압축파일이 받아진다. 다움받아서 압축을 풀어보면 파일 세개가 들어있는것을 볼수 있다. 이것은 학습시킨 이미지를 가지고 있는것이 아니라 그 이미지를 판별하는 모델을 가지고 있기 때문으로 용량도 그렇게 크지 않다. 그러면 이 모델을 포함하는 웹서비스를 만들어 본다. 먼저 폴더에 마우스 우측을 누르고 새로만들기로 텍스트 문서를 만들어 준다. 문서명은 index.html 파일로 저장한다.







■ 메모장으로 웹페이지 만들기


index.html




■ 코드 에디터


윈도우 메모장에 추가기능을 넣은 에디터다. 메모장에서도 코딩 할수 있지만 어떤게 틀렸는지 밑줄도 안나오고 자동완성 등 부가 기능이 없어서 불편하다. 가장 최신이며 요즘 인기가 많은 VS 코드 (Visual Studio Code) 를 설치한다. 




 VS 코드 (Visual Studio Code)


홈페이지







 코드편집


















 물체인식 웹 사이트에 업로드






 물체인식 웹 테스트 (물체 인식률)





 물체인식 웹 스마트폰 테스트 (물체 인식률)




 코딩 이해 (물체 인식률)







 코딩 변형 (물체 설명)


전화기를 비추면 전화기 설명이 나오고 각 리모콘을 비추면 각 리모콘 설명이 나오고 이런 방식으로 코딩을 변형한다.









■ 코딩 설명 (물체 설명)


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div>Teachable Machine Image Model</div>

<button type="button" onclick="init()">Start</button>  # Start 버튼을 누르면 init() 함수가 실행된다.

<div id="webcam-container"></div>

<div id="label-container"></div>

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script>

<script type="text/javascript">

    // More API functions here:

    // https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image


    // the link to your model provided by Teachable Machine export panel

    const URL = "./my_model/";


    let model, webcam, labelContainer, maxPredictions;


    // Load the image model and setup the webcam

    async function init() {  # init() 함수는 여기에 있다.

        const modelURL = URL + "model.json";  # 우리가 만든 모델을 불러온다.

        const metadataURL = URL + "metadata.json";


        // load the model and metadata

        // Refer to tmImage.loadFromFiles() in the API to support files from a file picker

        // or files from your local hard drive

        // Note: the pose library adds "tmImage" object to your window (window.tmImage)

        model = await tmImage.load(modelURL, metadataURL);

        maxPredictions = model.getTotalClasses();


        // Convenience function to setup a webcam

        const flip = true; // whether to flip the webcam  # 카메라를 켜서 반복 loop 실행

        webcam = new tmImage.Webcam(200, 200, flip); // width, height, flip

        await webcam.setup(); // request access to the webcam

        await webcam.play();

        window.requestAnimationFrame(loop);


        // append elements to the DOM

        document.getElementById("webcam-container").appendChild(webcam.canvas);

        labelContainer = document.getElementById("label-container");

        for (let i = 0; i < maxPredictions; i++) { // and class labels

            labelContainer.appendChild(document.createElement("div"));

        }

    }


    async function loop() {  # loop() 함수는 webcam 계속 update 하며 predict() 함수로 예측을 수행한다.

        webcam.update(); // update the webcam frame

        await predict();

        window.requestAnimationFrame(loop);

    }


    // run the webcam image through the image model

    async function predict() {  # predict() 예측함수는 여기 있다. 

  # predict() 예측함수는 model 을 이용하여 webcam.canvas 이미지로 예측한다.

        // predict can take in an image, video or canvas html element

        const prediction = await model.predict(webcam.canvas);  # 코딩변형부분으로 물체 비추면 설명이 나오게 변형한다.

        if(prediction[0].className == "phone1" && prediction[0].probability.toFixed(2) > 0.70) {

            labelContainer.childNodes[0].innerHTML = "[DIY연구소] 전화기 Tel: 031-811-6667"

        } else if(prediction[1].className == "aircon_remocon1" && prediction[1].probability.toFixed(2) > 0.90) {

            labelContainer.childNodes[0].innerHTML = "[DIY연구소] 에어콘 리모콘 Samsung: Hauzen ARC-1387"

        } else if(prediction[2].className == "cable_remocon1" && prediction[2].probability.toFixed(2) > 0.90) {

            labelContainer.childNodes[0].innerHTML = "[DIY연구소] 케이블 리모콘 LG U+: KCC-CRM-RMB-RC20A00"

        } else if(prediction[3].className == "tv_remocon1" && prediction[3].probability.toFixed(2) > 0.90) {

            labelContainer.childNodes[0].innerHTML = "[DIY연구소] 텔레비전 리모콘 LG: XCANVAS"

        } else {

            labelContainer.childNodes[0].innerHTML = "[DIY연구소] 알수 없음"

        }

        // for (let i = 0; i < maxPredictions; i++) {  # 변형으로 사용안할 아래 4줄은 선택후 'Ctrl + /' 로 주석처리 한다.

        //     const classPrediction =

        //         prediction[i].className + ": " + prediction[i].probability.toFixed(2);  # prediction[i] 클래스이름 + ":" 

   # + prediction[i] 가능성을 더해서

        //     labelContainer.childNodes[i].innerHTML = classPrediction;  # html 요소에 넣어주고 있다. 코드가 실행된것이

   # 물체인식 화면 밑에 나타나게 된다.

        // }

    }

</script>


</body>

</html>



 변형된 물체인식 웹 테스트 (물체 설명)






 물체인식 웹 스마트폰 테스트 (물체 설명)



☞ 홈페이지(숫자좌측)

☞ 홈페이지(설명좌측)

☞ 홈페이지(설명중간)











- 첨부파일

index.html  
   
사업자 정보 표시
| | | 사업자 등록번호 : -- | TEL : -- | 사이버몰의 이용약관 바로가기