Smart Life, Enjoy Life ~~

2020년 4월 26일 일요일

[공지] 티스토리로 이사갑니다.

https://mrkool.tistory.com/

'구글'이라는 이름을 보고 시작했었는데, 사용 편의가 너무 안좋네요.
티스토리가 이전에는 허가를 받아야만 시작할 수 있었는데,
이제 풀렸다는 걸 알고 바로 옮깁니다.

그림을 복사해서 붙일 수 있다는 한 가지만으로도 글 작성이 두 배 빨라지네요.

2020년 4월 18일 토요일

레고...

애들 장난감이라고 생각했던게, 또 다른 세계를 구축하고 있다는 걸 알게됬다.
레고 테크닉이라는 고급 제품의 가격은 몇 십 만원을 넘고 있고, 각종 모터가 연결되고, 코딩 개념까지 들어가면서 키덜트(Kidualt) 문화를 만들고 있었다.

아들에게 창작의욕을 고취하기위한 본보기를 보여줘야겠다는 생각에서 핀볼을 만들어볼 결심을 하게된다.

최초 생각은, 공이 떨어지면 그걸 센서가 감지하고 모터를 동작시켜서 공을 다시 올려주는 걸 구상했으나.... 실패!! 사람에겐 가장 간단한 것이 오히려 기계에게는 가장 어려울 수 있다.

며칠을 고생하다가 최종 완성본.

동작 영상은 아래 링크에...
https://youtu.be/UBL5DKbelFk

모터로 공을 끌어올리는 버젼을 성공하긴 했다.

동작영상 :
https://youtu.be/oc-yOOkGjyM

그러나 레고 블록면이 위로 올라와서는 공이 잘 흘러내리지 않았고,
핀볼의 기본 특성을 살리기 위해서 레고를 모두 옆으로 눕혀서 다시 제작에 들어간다.

깔끔하게 개선된 버젼

레고를 눕혔더니, 공이 깨끗하게 잘 굴러내려온다.

이제 여기에 모터로 공을 올리려했으나, 실패하고, 일반적인 핀볼처럼 수동으로 공을 쏘아올리는 방식을 채택한다.

핀볼을 쏘아올리는 부분은 크레인의 팔 부분에서 고무줄로 새총처럼 공을 쏘아올린다.

이것도 만들다보니 오기가 생기드라.
다른 모터가 갖고 싶고, 다른 기어가 갖고 싶어졌다. 여기다 코딩까지 적용하면 더 재밌는 걸 만들어 볼 수 있겠다.

2020년 3월 29일 일요일

[App 만들기] 첫번째 코딩 결과물

Webview app을 제작하기로 했으니, 이제 HTML,CSS,Javascript만 공부하면 된다.

app으로 구현하려는 idea는 있으나, 그건 한참 배움이 필요한 내용이겠고, 첫번째 app으로 '회사내 사전'을 만들기로 했다.
회사의 모든 정보를 한 곳에 모아놓고 그걸 검색해서 보여줄 수 있는 기능이다.
실제로 회사 내부의 수많은 정보들이 곳곳에 흩어져있어서 참고가 안되거나, 찾는데에 많은 시간을 소비하는 경우가 많다. 휴가,복지와 같은 규정들, 문서 양식, 업무 담당자 목록 등 관련은 없지만 그런 내용들을 한 곳에서 참고할 수 있으면 좋을 것이다.
물론 대기업들은 '챗봇'이라는 인공지능까지 결합된 서비스를 사용하지만, 작은 기업에 그럴 필요까지 있겠나. 그래서 내가 만들어보기로 했다.

현대모비스, AI 챗봇 도입 ‘1000만 사내 정보’ 업무 활용

기능은 간단하다. 찾을 정보들의 리스트를 만들고, 그 안에서 제목을 검색하고 그에 맞는 내용들을 보여주면 된다. 즉 검색 기능만 javascript로 구현하면 되겠다.

첫번째 version의 모습.

간단한 기능이지만, 코딩 초보자에게는 절대 쉽지 않다.

] 첫번째 문제: html input창에 입력한 값을 어떻게 javascript로 보내고, 그 결과를 어떻게 html에 다시 표시할까?

] 두번째 문제 : 검색 기능을 어떻게 구현할까?

아래에 하나씩 설명하겠다.

 <div class="input">

      <input type="text" placeholder="용어를 입력하세요" id="input" onKeypress="javascript:if(event.keyCode==13) {search()}" />

      <button onclick="search()">찾아보기</button>

    </div>

html에 검색창을 넣고, enter키(keyCode 13번)가 눌리거나 검색버튼이 클릭되면 javascript의 search()라는 함수를 실행한다.

javascrit에 dic이라는 배열함수를 설정하고, 그 배열 안에 검색할 항목(name)과 그 내용(desc)들을 다 입력했다.

검색할 데이터들을 javascript 코딩 내용에 다 때려넣었다는 말이다. 엄~청 무식한 방법이다. 초보때는 이런 것도 과정이다.

 function search(){

      var input=document.getElementById("input").value; //html input에서 입력한 값을 javascript의 input이라는 변수에 입력한다.

      var index = dic.findIndex(i => i.name == input);  // input값과 dic 배열의 name이 같은 객채를 찾아서 그 내용을 통째로 index라는 변수에 넣는다. 

      document.getElementById("output").value=dic[index].catego; // 반환된 dic배열의 값에서 catego의 내용을 html 의 output이라는 id를 가진 곳에 표시한다.

      document.getElementById("output2").value = dic[index].desc1; // 반환된 dic배열의 값에서 desc1의 내용을 html의 output2라는 id를 가진 곳에 표시한다.

      document.getElementById("output3").value = dic[index].desc2; // 반환된 dic배열의 값에서 desc2의 내용을 html의 output3라는 id를 가진 곳에 표시한다.

    }

여기서 이해가 어려운 부분은, index라는 변수에 들어가는게, 1개 값이 들어가는게 아니라(사실, 이게 변수의 상식적인 의미잖아!) ,

배열의 1개 항목이 통째로 들어간다.

index변수의 내용이, "name : 어쩌고, catego : 저쩌고, desc1: 이것저것" 이렇게 다 들어간다.

그것에서 output1,2,3에 각각의 항목을 나눠서 넣어주는 것이다.

이제 html에 script의 내용들이 표시될 곳에 id를 입력해준다.

      <div class="div3">

        <textarea id="output" style="border: none;" cols="30" rows="2"></textarea>

      </div>

      <div class="div4">

        <textarea id="output2" style="border: none;" cols="60" rows="6"></textarea>

      </div>

      <div class="div5">

        <textarea id="output3" style="border: none;" cols="60" rows="6"></textarea>

      </div>

이렇게 완성이다.

뭐든지 해놓고나면 간단하지만, 모를때는 깜깜하다.

더 효율적인 방법으로 version up을 하게된다. 다음 포스트에...

2020년 3월 22일 일요일

[Work Smart] 원노트를 업무 다이어리로 사용하기 (paperless work)

저는 원노트(One note)를 4년째 종이 다이어리 대신에 사용하고 있습니다.
어느날 서랍에 쌓여있는 과거 종이다이어리를 보고는, '언제 열어볼지도 모르는 종이덩어리를 계속 가지고 있어야되나?'라는 생각이 들었고, 그러던 중에 필기를 할 수 있는 태블릿을 발견하면서, 바로 원노트로 다이어리를 바꾸고 paperless 생활에 돌입하게 됩니다.

원노트를 다이어리로 사용하는 장점
- 종이 다이어리가 차지하는 부피가 없어진다.
과거 자료를 혹시 찾아볼 일이 있지 않을까 걱정하면서 다이어리를 꾸역꾸역 보관할 필요가 없다.
혹시 메모를 많이해서 다이어리를 1년에 몇 권씩 사용하는 경우라면 더더욱...
- 내 모든 데이터를 저장할 수 있다.
참고할 데이터를 프린트해서 다이어리에 붙이다보면 뚱뚱해진 다이어리의 경험은 없는지?

- 다이어리가 바껴도 유지할 자료는 쉽게 옮겨진다.
정초에 다이어리가 바꼈다고 먼저번 다이어리에서 속지를 옮겨가거나 할 필요가 없다.
다이어리를 분실해서 기록을 날려먹을 일이 없다. 혹시 태블릿을 잃어버려도 원노트의 자료는 클라우드에 잘 살아있다.
- 태블릿,노트북,휴대폰의 자료가 동일하게 유지된다.
내가 고객과 미팅 내용을 써놓고, 자리로 와서 노트북을 열면 그 미팅 내용이 그대로 옮겨져있다.
고객사 미팅 나가기전에 노트북에서 관련자료를 붙여넣어두면, 미팅할 때 태블릿에서 그 내용을 확인할 수 있다. 이메일이나 문서 폴더를 뒤젂일 필요가 없다.

처음 원노트를 사용하려고하면 막막하긴 하다. 뭐부터 써야하나... 정답은 '그냥 써보는 것'이다. 아무것이나 기록하고 이리저리 분류하면서 본인에게 맞는 방법을 찾아가면 된다.

원노트의 영역은 세 가지로 구분된다. 전자필기장, 섹션, 페이지
전자필기장 : 다이어리 1권의 개념
섹션 : 생긴 것처럼 다이어리의 바인더 개념
페이지 : 기록하는 페이지

나는 직관적으로 년도,월,일로 다이어리를 꾸몄다.
보관해야할 자료들은 별도 섹션을 꾸며놓으면, 필요할때 쉽게 찾아볼 수 있다.
사람에따라 섹션을 관리하는고객사로 만들고 페이지에는 해당 고객사에 관련된 내용만 기입하는 식으로 사용할 수도 있을 것이다.

업무와는 상관없는 개인적인 필기장을 따로 만들어서 관심사들을 따로 스크랩하기에도 좋다.

휴대폰 인터넷에서 찾은 좋은 자료를 '공유하기'로 원노트에 손쉽게 스크랩할 수 있고,
윈도우라면 크롬의 확장프로그램 'OnenNote Web Clipper'가 아주 도움이 된다.

나는 필기할 수 있는(stylus펜이 있는) 태블릿이 있어서 태블릿에 바로 미팅내용들을 기입하지만, 그런 태블릿이 없는 경우에도 난 원노트를 강추한다. 종이에 기입한 내용들을 사진찍r고 위와 같이 원노트로 옮기면 된다.

스타일러스 펜으로 원노트에 필기는 아래의 링크로 대신한다.
https://www.clien.net/service/board/park/9648249

원노트 이외에 노트프로그램의 강자는 에버노트(Evernote)가 있으나, 내 선택은 원노트!
- 어쩔수 없이 사용할 수 밖에 없는 오피스 프로그램과의 호환이 좋다.
- 자유로운 필기가 가능하다. (에버노트는 필기 영역과 타이프 영역이 구분된다.)
- 여러 기기간에 동기화가 훌륭하다.

이 글을 읽고 혹시 필기가 가능한 태블릿을 구입해야겠다 하는 생각이 들었다면, 이제는 또 다른 고민이 시작된다.
윈도우 태블릿이냐, 안드로이드냐, 아이패드냐.... 각 기기의 필기감은 어쩌고저쩌고....
이 내용은 다른 글로 올리기로 하자.

[App만들기] Web view app 만들기

이 블로그를 작성하는 목적은, 전문지식을 알리기 위함이 아니다.
이런 목적으로는 훌륭하신 분들의 사이트가 이미 많다.
나 같이 완전한 비전공자가 App을 만들어 가는 과정을 공유해서, 나처럼 시간,노력을 낭비하지 않게 하기 위함이다.
-------------------------------------------------------------------------------------------------

나는 하이브리드 웹뷰App을 만들어야 한다.
native앱을 만들 능력,시간은 없고, 단순한 웹앱으로 해서는 뽀다구도 안나거니와 구글스토어 등록도 안된다.
하이브리드 웹뷰앱이나 웹앱이나 인터넷 사이트를 보여준다는 건 동일하다.

외관적으로는, 아래처럼 인터넷 주소창이 보이면 웹앱, 안보이면 하이브리드 앱이라고 해도 된다.

하이브리드앱은 프레임워크를 통해서 제작해야하고, 그래서 휴대폰에 apk파일로 설치가 된다. 나중에 개발실력이 좋아지면, 네이티브앱처럼 휴대폰의 센서,카메라 등과 연결되서 활용이 가능하다.

하이브리드 웹뷰앱을 만들면, 나는 웹사이트만 관리하면 된다. 웹사이트의 디자인과 컨텐츠만 변경하면 휴대폰에 설치가 된 app의 내용도 바뀐다. 그러니 HTML,CSS,Javascript만 공부하면 app을 운영할 수 있는거다.

안드로이드스튜디오로 웹뷰를 만들기까지도 한참이나 헤맸다. 이전에 고수들의 블로그 내용이 안드로이드스튜디오가 업데이트 되면서 적용이 안되는 것도 있고, 코드들을 간단히 복붙했더니 중간에 내용을 import 어쩌고 해야되는 것도 있고해서 안됬다.

서론이 길었는데, 아래와 같이 구현했다.
-----------------------------------------------------------------------

] 안드로이드스튜디오에서 새로운 프로젝트를 생성한다.
Project template는 Empty Activity로 선택

] 생성된 초기화면에서 activity_main.xml로 이동. 아래의 선택 부분을 LinearLayout으로 변경.

] TextView 부분은 삭제하고, WebView 입력

입력라인 :

<WebView

android:id="@+id/webview"

android:layout_width="match_parent"

android:layout_height="match_parent"></WebView>

] MainActivity.java로 이동해서 private 2개 라인 입력

입력라인 :

private WebView webview;

private String url="https://(화면에 보일 인터넷 주소)";

위에서 WebView가 빨간색이면 그 단어에 커서를 두고 alt+enter를 쳐서 import class 실시해주면 빨간색이 없어진다.

] @Override 아래로 입력

입력라인 :

webview=(WebView)findViewById(R.id.webview);

webview.getSettings().setJavaScriptEnabled(true);

webview.loadUrl(url);

webview.setWebChromeClient(new WebChromeClient());

webview.setWebViewClient(new WebViewClientClass());

빨간색 WebChromeClient()에 커서를 두고 alt+enter를 쳐서 import class 실시.
그 아래의 WebViewClientClass()는 잠시 대기

] 이제 휴대폰에서 뒤로가기를 터치했을때의 동작을 지정해줘야한다.
첫번째 @Override 입력 완료한 아래에서

ctrl+O를 눌러서 onKeyDown을 입력하고 엔터키 누르면 아래에 새로운 @Override가 생성됨.
중간에 아래 두 개 행을 추가해줌. 뒤로가기를 눌렀을 때의 동작을 지정해주는 것임.

입력라인 :

if((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack()){
    webview.goBack();

return true;}

] 이제 아까 대기했던 빨간색 WebViewClientClass()으로 커서 이동.
alt+enter를 쳐서 Create inner class 선택. 그러면 맨 아래에 새로운 class 지정라인이 생성된다.

] 생성된 라인에 추가 입력.
명령을 닫는 } 마크는 항상 주의하자. 이 사소한 입력을 빼먹어서 동작 안되는 이유를 찾느라 많이 고생한다.

입력라인 :

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {
    view.loadUrl(url);

return true;

] 이제 인터넷 권한설정이 필요하다.
app > manifests > AndroidManifest.xml 을 열고 입력해준다.

입력문구 :

<uses-permission android:name="android.permission.INTERNET"/>

자 여기까지 하고 build를 해보면 지정했던 web page가 휴대폰 안으로 들어온 것을 확인할 수 있다.

그런데, 화면 상단에 타이틀바가 있어서 그걸 없애야 한다면, res > values > styles.xml에 아래 두 줄을 추가하자. (왜 같은 내용 두 줄인지 모르겠다. ㅡㅡ;)

<item name="windowNoTitle">true</item>

<item name="windowNoTitle">true</item>

이제 우리는 WebView안에 들어갈 내용을 꾸미기 위해서, HTML,CSS,Javascript만 공부하면 된다.!!
그런데, 좀 더 기능을 넣으려면 Vue, 안드로이드스튜디오, Python ...... @_@

2020년 3월 18일 수요일

[App 만들기] 언어 익숙해지기

내가 글을 쓰는 목적은, 전문지식을 알리기 위함이 아니다.
이런 목적으로는 훌륭하신 분들의 사이트가 이미 많다.
나 같이 완전한 비전공자가 App을 만들어 가는 과정을 공유해서, 나처럼 시간,노력을 낭비하지 않게 하기 위함이다.
-------------------------------------------------------------------------------------------------
비전공자에게는 전공자가 아무리 쉽게 말해준다고 해도 어렵다. 객체,메쏘드,클래스,배열....
이공계 전공자가 뭔가를 설명해줄 때 가장 황당한 건, 갑자기 공식을 들이대면서 '그래서 이렇게 된다'라고 한 마디에 정의를 하는거다. 문돌이는 이해 못한다.

나는 HTML,CSS,Javascript를 배워야 하는데, 제대로 책 펴놓고 해서는 절대 오래 못간다.
옛날 성문영어(너무 오래된 비유....) '명사편'만 손 때 뭍은 그런 결과가 된다.
뭔가를 만들어가면서 결과물을 보고 흥미를 이어가야 한다.
그런 면에서 아래 유튜브가 좋았다. App을 만들어야겠다는 결심을 하게 된 것도, 이 영상들을 먼저보고 흥미가 생긴 영향이 크다.

조코딩 https://www.youtube.com/channel/UCQNE2JmbasNYbjGAcuBiRRg/featured
초보궁사 실전코딩 https://www.youtube.com/channel/UCVmD2eUTGL8Ac9fYcplrpgw

그리고, CSS 활용을 배울 수 있는 좋은 유튜브

CodingNepal https://www.youtube.com/channel/UCk7xIEmd3MeyhIu2StLX5yA

보기에는 엄청난 효과들을 몇 분만에 만들어내는 실력에 감탄...
네팔 사람인가본데, 지역적 구분을 의미없게 만들어버리는 온라인의 시대에 다시 한 번 감탄...

좀 눈에 익숙해지면, 구체적인 강의들을 찾아보면 되는데, 공부하고 싶은 방향으로 검색어를 구체화시키면 동영상은 쉽게 찾을 수 있다.
Javascript, Android Studio, Cordova, Vue...

수많은 동영상을 올리신 분들에게 박수를 보내고, 꼭 돈 많이 버시기 바랍니다.

내가 이용한 몇 개는,

센치한 개발자 https://www.youtube.com/channel/UCvb9oqG4CtZ5H4m_NSD1GYA
개발하는 정대리 https://www.youtube.com/channel/UCutO2H_AVmWHbzvE92rpxjA
Coding works https://www.youtube.com/channel/UCV5u_ZGPD6WPUPfjc1fPA3A/playlists

그냥 보려면 동영상이 너무 많아서 '재생목록'으로 등록하고 봐야된다.

정말 저 위에 올려진 동영상들만 잘 공부하면 초보app은 무난히 만들 수 있을 것 같다.
그런데, 편하게 동영상을 보면서 실습할 시간이 없다.... ㅠㅜ

2020년 3월 14일 토요일

[App만들기] 프레임워크 결정하기

이제 Javascript로 간단한 프로그램 몇 개를 구현해봤다.
이제 이런 것들을 제대로 된 app으로 만들야겠는데, 여기서 필요한게 프레임워크다.
프레임워크란, 소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합... 어쩌고 하는데, 난 그냥 'app을 만들기 위한 최종 tool'로 이해했다.

HTML,CSS,Javascript로 만들어놓은 것들을 안드로이드 app으로 만들어야되서 검색하다가 Cordova를 발견했다.

HTML,CSS,JS를 가지고 안드로이드 앱은 물론이고, IOS 앱, 게다가 윈도우프로그램으로까지 만들 수 있다고?!?! 이 말에 뿅갔다.
설치는 쉽지 않다. (난 문돌이다!!)
어쨌든 따라해서 두 개 app을 만들기는 했는데, 이건 좀 아니다 싶은거다.
'내가 왜 도스창에서 낑낑대고 있지?'

그리고 cordova로 만든(사실은 '변환'했다는 표현이 맞다) app은 완전히 웹페이지를 그대로 옮겨놓은 app이었다.
'완전 web view앱은 플레이스토어 등록도 잘 안된다던데... 뭔가 native적인 기능도 필요한거 아닌가...'

그래서, 안드로이드앱을 만들려면 안드로이드스튜디오를 해야한다기에 안드로이드스튜디오를 배우기 시작했다.

뭐든지 처음은 쉽다. 그리고 도스창에서만 놀던 것에 비해서, 안드로이드스튜디오는 더 있어보인다.

화면 구성을 해보고, 버튼으로 동작도 시켜보고 하는데, 어째 기분이 이상하다. 내가 생각했던 Javascript에서 점점 멀어지고 있고, Java나 Kotlin을 배워야하는 분위기가 되간다. 즉, native app을 만들어야될 것 같이 흘러가는거다.

안된다. 내 목표는 웹페이지도 만들고, 그 기반으로 app까지 만드는 것이다.
그리고, 다른 언어를 배울 여유도 없다. Javascript도 초보인데...

아.. 다른 프레임워크를 찾아야겠구나.
검색을 해보는데, 프레임워크도 많고, 자기들이 선택한 프레임워크가 가장 좋다는 말 뿐이다. 아.. 머리 아프다.

2019년 최고의 하이브리드 앱 개발 프레임워크 5가지 - Wishket -

HTML, JavaScript, CSS의 조합으로 모바일 앱을 만들수 있다는 면에서 Ionic과 PhoneGap에 눈이 간다.
(PhoneGap은 일종의 Cordova의 공개 배포판이라고 한다!! PhoneGap이 Cordova의 모든 기능과 추가적인 기능들을 더 포함한다는데, Adobe가 후원한다는게 영 꺼림직하다)

검색을 하다보니 VUE,js가 점점 눈에 띈다.
쉽고, 최근 사용자가 급증하고 있다는...

시간이 넉넉치 않은 취미 문돌이로서는 방향 하나 선택하기가 너무 부담이다.
결국 아래 글을 읽고 VUE로 결정했다.

프레임워크 선택하기

이제와서 돌아보니 벌써 맛보고 지나온 것들이 몇 개나 된다.

App Inventor, Swing App, Cordova, Android Studio

이제는 정착할 수 있기를...