모에모에 코딩

그림 취미 5년차

hazimenya — Fri, 11 Mar 2022 19:02:03 +0900

최근에 그린 블루아카이브의 이오리 그림, 무려 인스타에서 18좋아요를 받아 매우 기쁜 상태 ^^

https://www.instagram.com/reel/CaZuFRQDzh0/?utm_medium=copy_link

색칠은 잘 안하고 선화 정도로만 그리고 있지만 옛날의 그림보단 정말 많이 변했다고 스스로 볼때도 느껴진다

이런 변화 때문에 요즘은 아는 사람들에게 그림 그린다고 자랑스럽게 말 할수도 있게 되었고 개발자인데 그림을 그리는게 평범하진 않으니 신기하게 봐주는 분들도 종종 있었다.

때론 Live 2D 를 써가며 단순 멈춰있는 그림이 아닌 파츠별로 움직이고 눈도 깜빡이게 만들어 보기도 했고

프로그래밍을 어느정도 할 줄 알고 있었으니 나름? 버튜버도 만들어 보기도 했다.

Vtuber

Yea! Fucking vtuber

hazimenya.gapmoe.net

위 링크에서 직접 체험 해볼 수 있음

0년차

물론 처음부터 잘 했던건 아니었다. 정말 처음엔 모두가 말렸고 못그린다는 말을 많이 들었다. 실제로 정말 못그리긴 했다

칸코레 시마카제

지금봐도 외계인이다. 우째 얼굴 비율도 그렇고 몸 상태는 진격거 기행종 마냥 팔도 얇고 와 답이 안나오네

저 상태서 게임도 만들려 했었다. 무슨 자신감이었는지 ㅋㅋㅋㅋㅋ

그림 그리는 장비도 없었기 때문에 가장 싼 와콤 타블렛을 이용해 그렸었는데 타블렛에게 미안할 정도였다.

1년차

알렉스트라자 할로윈

정말 이상하리 이상할만큼 저당시 그렸던 그림 평균 치곤 꽤 잘나왔다. 다시 그리라면 지금도 저 퀄 안나올꺼 같은데 아직까지도 이상하네 왜 준수하게 그렸지? 장비 탓인가? 타블렛에서 아이패드로 바꿨을 시점이긴 한데 너무 다르긴 하네

그리고 저 때 부터 머리카락 휘갈겨서 그리기 시작했다 ㅋㅋㅋㅋ 지금도 머리카락 그리면 겁나 길고 휘갈긴다 ㅋㅋㅋㅋ

그리고 저때 뭔가 꼴리게 궁둥이가 보이게 그렸었네 으썸하다

너무 뽕에 찬 나머지 케이스 까지 만들어서 다녔다

2년차

2019년 연말정산

저 해에 연말정산을 했었는데 퀄리티가 들쭌 날쭉 하던 시기였다. 회사를 다니던 중 이었기 때문에 그림 그릴 시간도 짬짬히 내서 그려왔고 속도도 느린탓에 한달에 1건 밖에 못그렸다.

이렇게 조금씩 바뀔 수 있었던건 주변 사람들이 좋은 지적을 많이 해주었기 때문에라 생각한다. 무슨 자신감이었는진 모르겠지만 스케치 한걸 어떠냐고 디자이너한테 물어봤었고 바로 피드백을 받을 수 있었다. 또 주변에 알고 지내는 형들한테도 피드백을 받아가니 알게 모르게 이상하게 되는 부분은 고쳐갔던거 같다.

아무튼 피드백을 받아 들이고 고쳐가는 것이 제일 중요했다.

3년차

HK416 소녀전선

색칠은 역시 또 다른 영역인가 보다 라는 시점이었던거 같다. 어렵다 지금도. 다만 무엇보다도 사람의 형체가 분명히 보이기 시작했다. 지금 그림도 역동적이진 않은데 저땐 그래도 뭔가 몸을 움직인걸 그릴려 했던거 같다. 표정도 찡그린걸 그릴려 했던거 같다.

저 그림으로 장패드를 만들기도 했는데 지금 그게 어디다 두었더라?

4년차

홀로라이브 3기생

정말 그렸던것중 가장 사람을 여러명 그린 그림이 아니었나 싶다. 다시 그리라 하면 거품물듯

대략 한달정도 그렸던거 같은데 비록 색칠은 이때부터 하지 않게 되었지만 그만큼 시간을 인체 비율이라던지 디테일이라던지 그런 부분에 투자할 수 있었던거 같다.

Hololive 3rd gen

www.youtube.com

각 그림별 과정은 위 링크에서 확인 할 수 있다.

5년차

프린세스 커넥트 아메스 JK 버전

요즘도 간간히 그림을 그린다. 아니지 이제까지 쌓아온 것들이 너무 아까워서 놓지 못해 그린다. 그림이란게 잠깐 쉬었다 하면 바로 손에 감이 사라졌기 때문에 계속 그렸고, 워낙 속도도 느리기 때문에 하루를 다 쓴다라는 생각으로 그린다.

앞으로 5년뒤엔 어떻게 변해 있을지 궁금하긴 한데 그래도 이 취미 만큼은 계속 하고 싶다.

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

운전면허 반 독학으로 따기!

hazimenya — Thu, 10 Mar 2022 20:04:52 +0900

2종 보통(오토) 면허를 한번에 붙었습니다.

기간은 한달정도 소요되었습니다. 이유가 있었는데

한창 면허를 따는 시기 (년 초)
작성자의 게으름

정도 입니다.

총 들어간 비용은 기본 접수 수수료와 주행 연수 및 시험 비용으로 30만원 정도 들어갔습니다.

기타 교통비등을 제외한 금액입니다

구글에 검색하여 나오는 학원비용에서 학과 교육과 장내 기능을 아낀 비용이라고 할 수 있습니다.

그 과정을 리뷰할겸 글을 작성합니다.

반 독학?

운전면허의 경우

면허시험순서 | 도로교통공단 안전운전 통합민원

www.safedriving.or.kr

위 도로교통 공단 홈페이지에서 운전면허 취득 과정을 안내해줍니다.

이 중에서 필기 시험, 장내 기능 시험을 학원을 다니지 않고 독학으로 공부하고 시험을 치루었기 때문에 반 독학이라고 하겠습니다.

신체검사 & 운전 교육

특정 지역의 공단을 제외하면 대부분의 공단에선 자체 신체검사실이 있습니다. 현장에서 시력검사를 받으시고, 문진표 작성하면 됩니다.

그 후, 안전 운전 교육을 1시간 가량 동영상으로 봅니다.

필기 시험

저의 경우 필기 시험을 제주도로교통공단에서 시험을 보았습니다.

정말 간단합니다. 학교에서 도덕시험 치루는것과 같은 난이도의 문제가 출제 되어지며, 종종 모르는 문구가 나올 때도 있지만 일부로 낙점을 받기 위해 노력하지 않는 이상 통과합니다.

공부를 하고 싶다면

운전면허 PLUS - 운전면허필기시험 (2022최신판) - Google Play 앱

2022년 최신 문항 반영, 100%적중! 대한민국 굿 앱 평가 교육부문 대상 수상! 1일완성! 급할때는 많이 틀리는 문제만!

play.google.com

와 같은 어플들을 이용하면 됩니다.

장내 기능 시험

강서 도로교통 공단 기준 기능 시험 코스 안내 판 입니다.

대부분의 장내 코스는 위와 비슷합니다.

과정은 유튜브에 검색하여 보시는걸 추천드립니다.

장내 기능 시험은 운이 좋았지만, 교육을 받을 수 있다면 받고 오는걸 추천 드립니다.

제 기준으로 말하면 각 구간마다 해야하는 과정들은 할만 했습니다. 워낙 운전류 게임을 즐겨왔기 때문에 차폭감이라던지 주차 감각이라던지 어느정도 휠을 돌려야 할지는 장내 코스 시험을 보면서 자연스럽게 알아갈 수 있었습니다.

브레이크는 밟을 줄 모르면 급브레이크를 자주 밟게 되는데 그럼 천장에 머리 박는건 감안하고 밟으셔야합니다. 끝나고 보면 머리 엄청 아플겁니다.

제일 문제는 돌발상황 입니다. 시험을 보고 있는 상황 특성상 긴장을 하고 있는 상태에서 돌발 소리에 놀라 엑셀을 밟았으나 다행이 몸이 반응하여 브레이크로 발을 바로 바꾸고 정차하였습니다.

의외로 엑셀을 세게 밟아도 생각만큼 빠르게 속도가 올라가진 않으나 연습이 되어있지 않기 때문에 발생한 위험한 상황이며 이 부분 때문에 가능하면 독학 대신 교육을 받고 오시길 추천 드립니다.

저의 경우 감점 항목으로

T자 주차 시간 초과
돌발상황 미대처

로 통과 점수인 80점에 턱걸이로 합격하였습니다.

팁으론 T자 주차에서 많은 탈선을 하시니 급하게 하실 필요 없이 천천히 하시기 바랍니다. 주차 시간 초과보다 탈선이 더 감점이 심합니다.

도로 주행

학원의 힘과 아는 형의 힘을 빌렸습니다.

연습면허가 있기 때문에 규정을 지키고 도로 주행 연습도 가능합니다.

하지만 동승자의 안전을 고려해 학원에서 연습을 받는걸 추천드립니다. 학원 차량은 보조석에도 브레이크가 있고, 다른 차량들이 보행자 만큼 주의해주는게 연습 차량입니다.

대부분 6시간 도로 주행을 거친 후 시험을 치루기 때문에 짧으면 이틀만에 면허를 딸 수 있습니다.

저의 경우엔 제주도에서 도로주행을 하였습니다.

학원마다 코스가 다르지만 쉬운 곳은 쉽습니다. 또한 제주도는 길이 넓고 차량이 적은 도로가 제법 많기 때문에 초심자로는 최적의 장소입니다.

다만 공포체험을 미리 했던 부분이 있는데 학원 지리 특성상 주행 코스와 거리가 떨어져 있어 이동을 해야 했습니다.

선생님께서 운전대를 저에게 주고 코스까지 이동하라고 하셔서 당황했지만 직접 운전하며 가고 있었습니다. 확실히 이러면 빨리 터득한다는 장점은 있었습니다. 하지만 예상치 못한 일이 있었으니 덤프 트럭이 뒤에 붙어서 오기 시작했고, 초행길이다보니 로터리에서 빠져야 하는데 지나칠 뻔하자 급브레이크를 밟았고 뒤에 오던 덤프도 같이 멈추게 되었습니다. 이때 들은 클락션은 정말 크더군요.

다행히 10 ~ 20km/h 속도로 로터리 회전 중 이었기 때문에 큰일이 일어나진 않았습니다. 다만 앞으로 운전할때 급브레이크를 삼가하고 지나쳤으면 지나친 데로 진행해야함을 몸으로 배운 느낌이었습니다.

그 외에는 정말 즐거웠습니다. 선생님도 심심하니 이야기 하면서 운전을 했고, 덕분에 시간도 잘 갔습니다.

시험도 연습한 코스 중 1군데를 랜덤으로 골라 주행하면 되었기 때문에 어려운건 없습니다.

저는 서울에 살지만 제주도로교통 공단에서 면허 신청을 하면 제주 면허가 나오기 때문에 약간 기념품? 같이 받았고 무사히 취득할 수 있었습니다.

티스토리에 개인 도메인 주소 연결하기

hazimenya — Thu, 10 Mar 2022 18:36:46 +0900

준비물로 개인 도메인 주소를 가지고 있어야 합니다.

AWS, GCP, 가비아, 후이즈 등에서 구매하실 수 있습니다.

또한 Cloudflare 를 기준으로 작성된 글 이므로 설정이 되어 있어야 합니다.

공식 문서는 여기 -> https://notice.tistory.com/1784 에서 확인 할 수 있습니다.

먼저 Cloudflare > 개인 도메인 주소 > DNS 탭으로 이동합니다.

위와 같이 DNS 레코드를 추가합니다.

형식 : CNAME
이름: 원하는 서브 도메인 주소 혹은 루트로 사용하려면 @ 입력
ex) blog.gapmoe.net ==> blog 값 만 입력
콘텐츠: 티스토리 서버 도메인 주소
blog.tistory.com or host.tistory.com
프록시 상태: 끄기
TTL: 자동

이후 저장을 누릅니다.

티스토리 > 해당 사이트 > 설정 > 관리[블로그] 로 이동합니다.

위에서 등록한 도메인 주소를 입력한 다음 [변경사항 저장] 버튼을 누릅니다.

해당 주소로 접속시 사이트는 접속가능하지만 보안연결을 실패하는 현상을 확인할 수 있습니다.

이는 인증서 발급 작업이 진행 중 이기 때문입니다.

인증서 발급은 티스토리에서 자동으로 진행하니 기다려주시면 됩니다.

IIS에 Flask 연결하기

hazimenya — Tue, 27 Aug 2019 17:43:13 +0900

늘 C#과 담을 쌓고 지내왔었기 때문에 당연히 ASP.NET 사용 방법을 몰라왔고, 그 녀석이 존재 하는지도 몰라 왔었다. 하지만 회사 내에서 제 파트는 ASP.NET을 사용했기 때문에 어거지로 공부를 시작했고, 야매스럽긴 하지만 나름 짬을 먹은 지금으로선 간단한 개발엔 문제가 없는 수준까진 올라올 수 있었다.

물론 하루하루가 늘 배움의 시작이기 때문에 의외로 모르는 부분이던가 아직 못 해본거라 던가 너무나 많다.

하지만 늘 신경 쓰이는게 있었으니. 정말로 C#은 쓰기 싫었다. 나는 정말로 Python을 쓰고 싶었단 말이다!

쓰기 싫으면 트집을 잡을 건덕지를 찾아 보았다.

I WANT PYTHON

트집 잡기

첫째로 리눅스 장비에 탑제하기가 어려웠다.

MS 홈페이지에 들어가 보면 .NET Framework 는 윈도우 장비만을 위한 프레임 워크라고 한다. 근데 우리는 ASP.NET Framework 를 사용하고 있으니 크로스 플랫폼 지원이 여간 까다로운게 아니었다. 물론 mono를 사용하면 어캐어캐 된다고는 듣긴 했다. 그래도 지원이 어려운건 사실이었으므로 당연히 서버는 윈도우 서버를 사용하기 위해 라이선스를 구매하여 사용해왔고 자연스럽게 단가는 올라갈 수 밖에 없었다.

둘째로 개발 장벽이 나름 높다.

처음 공부할 땐 웹에 관해 잘 모르는 점도 있긴 했었지만, 알아야 할 것들이 너무나 많았다. 서점에 책을 사러 갔을 때도 무슨 책을 사는 것이 아닌 무기를 샀다는 느낌이었다. 얇은 책도 있긴 했지만 차차 알아가기 까지는 꽤 시간이 걸렸던 것 같다. 6개월 정도가 소요되었던 것으로...

근데 flask는? 공식 사이트 들어가서 빠르게 시작하기 한 페이지만 따라 해도 기본적인 웹 서비스 구축이 가능했다.

셋째로 추후 머신러닝 프로젝트를 도입할 것 같다.

사장님과 회의를 할 때가 있었는데 머신러닝, 통계 쪽을 눈 여겨 보시는 것 같았다.

C# 으로도 당연히 머신 러닝을 할 순 있었다. 하지만 python 과 tensorflow 혹은 scikit learn을 이용하여 개발한 문서나 문제 해결 내역이 우리에겐 더 익숙했다.

서론이 너무 길었다. 본론으로 들어가자면, 아직까진 사내에선 윈도우 장비를 사용하는 것이 익숙했으므로 IIS를 이용한 Flask 기본 앱 연결 및 호스팅 하는 방법에 대해 기록하려 한다.

작업환경

AWS Lightsail Windows Server 2016

Python 3.7.4

Flask 1.1.1

소스 코드

app.py

from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello from FastCGI via IIS!"

if __name__ == "__main__":
    app.run()

wfastcgi.py

이건 pip install wfastcgi 로 설치 후 site-packages 폴더 들어가보면 wfastcgi.py 가 같이 딸려 설치 된다 빼오면 된다.

설치 과정

우선 IIS와 CGI를 설치해야 한다. CGI를 사용하는 이유는 웹 서비스를 하기 위해 내부 프로그램의 결과를 HTML 형식으로 반환해주기 위한 일종의 인터페이스이며, 우린 Python을 사용한 웹 서비스를 할 것이기 때문에 변환장치로 사용하는 것 이다. 라고 말 하는게 맞는지는 모르겠다.

Server Manager > Add roles and features > IIS > Management Service + CGI 선택 후 설치 진행 하면 일단은 IIS 와 CGI 설치가 자동으로 진행된다. 이 후 웹 브라우저로 localhost 접속 시도를 하여 테스트 페이지가 표시되는지 확인 하면 된다.

C:\inetpub 하위 디렉토리를 하나 생성하여 위에 준비했던 app.py, wfastcgi.py 를 넣어 준다.

IIS 에서는 새 웹 사이트를 생성한다.

Handler Mappings에서 Add Module Mapping 클릭 후

Request path:

*

Module:

FastCgiModule

Executable (optional):

C:\<INSTALLED PYTHON DIRECTORY>|C:\<INSTALLED FLASK WEB APP DIRECTORY>\wfastcgi.py

Name:

<WHAT YOU WANT>

작성 후

Request Restrictions > Mapping > Invoke handler only if request is mapped to

체크박스를 체크 해제 해준다.

서버 정보(Root) 로 이동 후

이미 추가 되어 있을 텐데 해당 항목을 더블 클릭 후, Environment Variables > Add

Name:

PYTHONPATH

Value:

<FLASK WEB INSTALLED PATH>

Name:

WSGI_HANDLER

Value:

app.app

크롬 브라우저로 자신이 만든 사이트의 포트번호를 통해 접속을 시도하면 위와 같은 에러 메시지가 표시될 것이다.

파이썬을 서버 환경에 처음 설치하였으니 flask 프레임워크가 설치되지 않아 생긴 문제인데 간단하다.

pip install flask 하면 해결 된다.

앞으로 더 많은 곶통이 시작되겠지만 어쨌든 환경 설정은 되었으니 끝!

맥북 배터리 자가교체기

hazimenya — Mon, 26 Aug 2019 21:55:34 +0900

어느날 부턴가 화면을 닫으면 틈이 생기고 누가봐도 볼록 튀어나온 것 같아 보이기 시작했다. 그러하다 배터리 스웰링 현상이 일어나는 바람에 노트북 외관, 기타 부품에 영향을 주기 시작한 거시다.

처음엔 수리 견적을 공인 A/S 센터에 방문했었고 26만원이라는 충격적인 가격을 들을 수 있었다. 너무 비쌌다.

그리하여 배터리 자가 교체를 하기로 결심했고, 약 8만원이라는 비용을 투자하여 필요한 최소 준비물을 모을 수 있었다.

하판의 나사를 조심스레 풀으려는 순간 얼마나 부풀러 올랐던지 하판을 손을 안대고도 자동으로 벌어져 버렸다.

덕분에 하판을 뜯는데는 힘이 전혀 안들어갔었지만 배터리 상태를 보니 안터진게 정말 다행이라 할 정도로 부풀어 올라 있었다.

배터리가 왜 터지는지 알 것 같았다.

일단은 기존 배터리를 제거해야 했다. 배터리와 본체가 양면테이프로 대단히 세게 붙여 있으므로 유튜브를 보니 다른 사람들은 껌때기 같은 도구가 있었지만 지금 현 상태에선 구하기가 어려웠으므로 주변에 돌아댕기는 얇은 플라스틱 출입증 카드를 이용하기로 했다. 유니티 고마워요!

본 작업만 40분 정도 소요되었다.

잘 못 건들면 터질까봐 긴장되었지만 다행이도 무사히 제거를 할 수 있었다.

정말 많이 부풀어 있었다. 얼른 새 배터리로 갈아 끼우자

편----안

이후 하드웨어 테스트를 돌린다음 모든 것이 정상임을 확인하고, 정상적인 사용이 가능했다.

정말 한 번쯤은 해볼만 하지만 두 번은 하지 않았으면 하는 경험이었지 않나 싶다.

강남대학교 달구지봇 개발기

hazimenya — Fri, 15 Feb 2019 11:39:42 +0900

달구지봇을 개발한지 어느덧 1년이 지났다. 진짜 별에 별일 들이 다 있었지만 언제나 사용해주는 학우들이 있었기에 유지할 수 있었던 것 같다. 그런 날들을 한번 회상해보고자 글을 작성하였다.

왜 이름이 달구지봇?

학교에서 제공하는 무료 셔틀버스가 있는데 그걸 학우들은 달구지라고 부른다. 이유는 잘 모르겠지만. 아무튼 달구지는 시간표에 정해진 시간대로 운행해왔고, 난 그 시간표를 카카오톡 채팅 봇으로 알려주면 좋겠다 싶어 개발하게 되었다.

근데 늘 그래왔듯 네이밍 센스가 없는 것 + 국어 딸림 크리가 곂치면서 달구지봇 이라는 이름이 지어지게 되었다.

PS. 더 좋은 이름이 있다면 언제든 제보 바란다. 맘 같아선 바꾸고 싶음

버전별 달구지봇

VER. 1.0

정말 기능이라고는 3가지만 존재했던 첫 버전이다. 단순 그 자체일 뿐더러 전체 달구지 시간표 안내는 사진이 아닌 텍스트로 출력을 했었으니 일반적으로 사람이 쓰기엔 조금 무리가 있던 버전이다.

그래도 뭔가 만들어 냈었으니 홍보를 해볼겸 실제로 걍 보이는 쌩판 안면없던 학우들에게 써보라고 어떻냐고 물어보기도 했다. 역시 반응은 처참했다. 아직도 기억에 남는 피드백들인데

- 이미 시간표 이미지로 배포가 되었고 걍 사진을 보면 되는데 왜 이게 필요한가요?

- 전 시간표를 다 외워서 필요 없어요

- ㅄ

음... 다 팩트라서 반박은 못 했다.

그래도 홍보를 꾸준히 하면서 업데이트를 지속해나갔다. 걍 밀어 부치자 식으로 하다보니

교내 학술제에도 끌고 나갔다. 홍보를 위해

저 발표를 할 당시엔 500+ 친구추가가 되었고 좀 더 매력적인 기능을 구현하기 위해 달구지 실시간 위치 안내를 구현 준비 중이었다. 다행이도 교수님들이 이쁘게 봐주셔서 최우수를 수상할 수 있었고, 이 덕분에 계속 업데이트를 할 수 있게되었다.

VER. 2.0

하지만 지속적으로 문제가 되던 부분이 있었다. 뭐 여러 문제가 있었지만, 기술적으로는 퍼포먼스가 문제였다. 당시 Firebase Functions 가 BETA 서비스 였고, 지역도 미국에 있었기 때문에 뭐 조금만 무거운 작업이 들어가면 카카오톡의 응답 제한시간인 5초를 넘겼다. 유지보수도 문제였다. 처음 짜보는 챗봇인데다가 Node.js가 익숙하지 않았기 때문에 되게 지금봐도 이상하다.

망할

그래서 방학기간동안 구조를 갈아엎게된다.

이 사진이 뭘까 싶을지도 모른다. 바로 달구지봇 2.0 개발당시 사용자 상태 변화 시나리오를 그래프로 작성해둔 것 이다.

이게 되게 중요한 사건이었는데, 1.0 버전은 사용자 입력에 따른 단순 응답이었다면 2.0 버전은 사용자 상태에 따른 응답이기 때문이다.

이로써 생기는 이득이 많았는데, 일단 저 상태를 처리할 엔진을 만들면 왠만한 응답은 서버가 알아서 상태를 확인해 응답을 자동으로 해주었다. 그리고, 무엇보다도 빠르고 다양한 기능을 관리하기가 쉬워졌다. 당연하게도 사용자가 진행할 루트가 다 결정적이고 예상되었으니깐.

게다가 OpenAPI를 적극 활용하기도 하였다.

그래서 만들어진 모습이 이렇게.

1.0 에서 모인 로그데이터를 활용하여 달구지가 혼잡함을 알리는 기능도 추가되어있다. 으썸하지 않나? 달구지봇 홈페이지에서는 달구지 실시간 위치 안내 기능도 제공했었다. 이렇게 가끔 기능 추가도 해주고, 유지만 하면 될줄 알았다.

VER. 3.0

3.0은 이미 만들어 놓은 챗봇에게 심폐소생술을 하기위한 버전이라 봐도 무방할 것 같다. 왜냐?

카카오톡에서 챗봇 정책을 변경했기 때문이다. 이해가 안된다면 간단하다, 기존 방식을 호환도 안되게 업데이트 해놓고선 2019-12 말 까지 업뎃 안하면 서비스 못하게 한다는 정책을 폈기 때문이다. 때문에 서비스를 포기하는 챗봇이 많이 나오기 시작했다.

다른학교의 챗봇들이 서비스 중단하는 예시들이다. 정말 큰 업데이트였음을 짐작할 수 있다. 나도 물론 포기하려했다. 아니 2.0에서 만든 기능만 해도 얼마나 많고, 1.0에서 2.0 으로 업데이트한지 반년밖에 안되었는데 또 갈아엎어야 하다니, 더군다나 이젠 구글 크래딧 지원도 만료되서 운영비 모두 본인이 부담해야 되는데 어떻게 유지를 하나 싶었다.

그러다 가만 생각해보니 업데이트를 해야할 이유가 생각이 났다. 달구지봇을 졸업과제로 쓰는건 어떨까? 은근 괜찮게 통할 것 같았다. 또한 친구 추가도 당시 1000+ 되었던걸로 기억하는데 주변에서 연락이 오기 시작했다. 계속 서비스 할꺼냐고

좋다 까지꺼 하지뭐

바로 Kakao i open builder OBT 신청 하고 다시 개발을 시작했다. 이번엔 프로젝트를 통째로 갈아 엎었다. 진짜 전부 다 밑바닥 부터

엔진은 2.0 버전을 기반으로 약간 수정하고, 카카오톡에서 챗봇에게 주는 이쁜 컴포넌트를 사용하는데 초점을 두고 개발했다.

일단은 만들어졌다. 3.0을 배포하였으니 이젠 사용자들의 피드백이 오는걸 기다리고 있으면 된다.

2.0 버전보단 확실히 기능이 적다. 기간이 많이 소요되는 부분이 있었는데 달구지봇 관리자 페이지가 추가되었기 때문이다. 기존에는 데이터를 수정하려면 늘 DB에 직접 들어가서 값을 바꿔주었다. 이젠 관리를 혼자서 하지 않을 뿐더러 DB에 직접 접근해 수정하는건 누가봐도 이상하기 때문에 추가를 했다.

이렇게 달구지봇 1주년을 맞이하게되었다. 아니 뭐 대단한 프로그램도 아닌데 판 뒤집기를 3번이나 했다. 뭐 그래도 유지 하려면 언젠간은 또 뒤집을 수도 있겠지. 그래도 지금 또 돌아보면 무슨 정신으로 했었는지 기가 막히기도 한다.

HTTPS 검열 뚫어보기

hazimenya — Wed, 13 Feb 2019 17:56:55 +0900

최근 HTTPS 검열로 인해 급 이슈가 되었습니다.

일부 사이트들이 접근금지되었고 처음에는 당황스러웠는데요.

하지만 역시 인터넷 검열을 우회하는 여러 방법들이 바로바로 나오기 시작합니다. ESNI 를 사용하라던지, Firefox 브라우저를 이용하라던지 뭐 방법이 많이 나왔죠. 이쯤되면 이미 검열을 피했다고 봐도 무방할 정도인 마당입니다.

저희는 이런 검열피하기에 기름을 부어보려합니다. 와우!

- 다만 아주 바보같고 멍청한 방식인 것이 아쉽지만, 개념은 간단합니다.

현재 국내에서 DNS 쿼리를 날리면 모두 검열을 당하니 나를 대신해서 웹사이트 데이터를 가져와 줄 서버가 존재하면 됩니다.

예를 들어 naver.com 의 웹사이트 데이터를 검열을 피해 대신 가져오고자 할 경우

해외에 존재하는 API 서버에게 가져올 주소를 쿼리로 날립니다.

https://{해외 API 서버 ENDPOINT}?url=https://naver.com

그러면 나를 대신해서 API 서버가 대신 웹사이트를 방문하게 되고 웹사이트 데이터를 가져오게 됩니다. 가져온 데이터를 압축하여 클라이언트에게 반환하게되면 웹사이트 모습을 볼 수 있게됩니다.

대신 가져온 웹사이트 데이터를 압축 해제한 모습

가져온 웹사이트 데이터의 index.html을 열어본 모습

물론 모든 웹사이트가 정상적으로 불러와지진 않습니다만 급할땐 요긴하겠죠?

카카오톡 아이 오픈 빌더를 이용한 번역 봇 제작기

hazimenya — Fri, 8 Feb 2019 14:02:41 +0900

본 게시물은 Kakao i open builder 를 이용하여 언어 번역 채팅 봇을 제작 하는 과정을 일기 형태로 작성하였습니다.

시작하기 앞서 불평불만

Kakao i open builder의 OBT 시작은 기존 스마트 API 형 채팅봇에게 시한부 선고를 내리는 말과 같았습니다. 지금 이 글을 작성하고 있는 필자도 OBT 이전부터 서비스를 이미 해왔고, 유지보수에만 신경쓰고 있었습니다.

당시 운영했던 서비스 Github 링크 https://github.com/stories2/KangnamShuttle

하지만 위와 같이 카카오톡 챗봇에 중대 업데이트가 올라 왔고, 2019년 말 까지 새로운 형태의 카카오톡 챗봇 서비스를 도입하지 않으면 서비스 중단이라는 공지까지 하면서 어쩔 수 없이 추가 개발을 해야 되는 상황이 되었습니다. 그래도 기존 API 형태랑 많이 다르지 않을 것이라 기대 했던 부분은 새로운 API 스펙을 보자 물거품이 되어버렸고, 다시 처음부터 프로젝트를 새로 만들는게 더 이득이라 생각될 정도였습니다.

다행이도 지금은 어느정도 지지고 볶은 덕분에 현재는 어느정도 서비스를 복구 할 수 있었습니다.

https://github.com/stories2/KangnamShuttle-3.0

번역 채팅 봇 제작기

어찌되었든 우리는 다시 채팅 봇을 제작할 것입니다.

주제는... 언어 번역을 해주는 봇이 괜찮겠군요.

들어가기 앞서

- OBT 승인된 계정이 준비되어야 합니다.

- 필자가 사용하던 챗봇 소스 템플릿에서 약간의 커스텀 마이징만 할 예정입니다.

- 모든 소스 내용은 https://github.com/stories2/Kakao-Translate 여기서 확인 할 수 있습니다.

- Kakao i open builder 의 무수히 많은 기능들 중 일부만 이용할 것 입니다.

- Kakao plus 계정이 준비되어 있어야 합니다.

사용할 서비스 / 기술

- Firebase functions, realtime-database https://firebase.google.com/

- NodeJS ver6.11.5

- NPM ver3.10.10

완성된 모습 미리보기

하단에 표시된 번역을 부탁해~! 버튼을 제네릭 메뉴라고 합니다. 제네릭 메뉴를 누르면 유저에게 어떤 언어로 번역을 할 것 인지 선택할 수 있는 퀵 메뉴를 제공할 것입니다.

또한 퀵 메뉴 (한국어, 영어, 일본어) 를 눌렀을 시 해당 언어로 번역을 시작한다는 문구를 보여주며, 이 문구 이후 부터 사용자가 입력하는 내용을 번역해줍니다.

번역을 마치고 싶을 땐 2가지 방법이 주어지는데 퀵 메뉴 (홈) 을 누르거나 제네릭 메뉴 (번역을 부탁해~!) 를 누를 시 초기 메뉴인 번역 될 언어 선택 상태로 돌아오게끔 합니다.

위 기능이 전부입니다.

TODO

어떤 내용을 만들지 목표가 정해졌으니 해야할 일을 정리하려 합니다.

할일	내용	비고
Kakao plus 프로필 만들기	사용자가 카카오에서 채팅을 할 프로필 생성
Kakao i open builder 프로필 만들기	챗봇을 만들기 위한 프로필 생성
Firebase 프로젝트 만들기	챗봇 어플리케이션을 호스팅할 프로젝트 생성
언어 선택 스킬 응답 만들기	사용자가 번역할 언어 선택지를 스킬을 이용해 생성
언어 번역 스킬 응답 만들기	Google API를 이용하여 사용자가 입력한 내용 번역
언어 번역 시나리오 및 블럭 연동	스킬과 블럭을 연동시켜 서비스 구현
베포 및 테스트	사용자에게 직접 서비스

개발 시작!

본격적으로 개발을 시작하여 봅니다.

Kakao plus 프로필 만들기

카카오 plus 친구를 만들 수 있는 주소는 https://business.kakao.com 입니다.

시작하기 버튼을 눌러 프로필 관리 화면으로 이동할 수 있습니다.

새 플러스 친구 만들기 버튼을 눌러 새 프로필을 만들게 됩니다.

필수 추가요소 및 프로필 정보를 입력한 후 확인을 누르면 플러스 친구 프로필이 만들어 집니다.

왼쪽 메뉴에서 관리 -> 상세설정 -> 플러스친구 홈

에서 홈 공개, 검색 허용을 토글하면 카카오 검색시 프로필이 노출될지를 정할 수 있습니다.

Kakao i open builder 프로필 만들기

Kakao i open builder 에서 프로필을 만들기 위해 https://i.kakao.com/openbuilder 로 이동합니다.

우측상단의 + 버튼을 클릭하여 새 프로필을 만들 수 있습니다. 선택지에서는 카카오톡 챗봇을 선택합니다.

프로필 이름까지 정하면 위와 같은 화면이 보여지게 됩니다.

간단한 설정이 필요합니다. 위에서 만들었던 카카오 Plus 프로필과 방금 만든 Kakao i open builder 프로파일을 서로 연결시켜주어야 합니다.

설정 탭 -> 플러스친구 계정 연결에서 플러스 친구 계정 드롭다운을 눌러 우리가 만들었던 카카오 Plus 프로필을 선택한 후 우측 상단의 저장 버튼을 꼭! 눌러줍니다.

저장완료 후 다시 카카오 Plus 프로필로 돌아가보겠습니다.

카카오 Plus 친구 -> 스마트 채팅 -> 챗봇 매뉴에 들어가면 상단에

챗봇

kakaobot ~~~과 연동됨 이라는 상태 표시 문구가 작성되어있습니다. 이때 연동 되었다는 문구가 보인다면 카카오Plus 프로필과 kakao i open builder 프로젝트가 서로 연결이 된 것입니다.

Firebase 프로젝트 만들기

https://console.firebase.google.com/ 로 접속하여 프로젝트 추가를 눌르면 프로젝트 생성 작업이 시작됩니다.

프로젝트 이름을 입력하면 자동으로 프로젝트 ID가 작성되며 위치 설정시 서비스할 대상이 위치한 가장 가까운 지역을 선택합니다.

위치 리스트는 https://firebase.google.com/docs/functions/locations?hl=ko 에서 확인할 수 있습니다.

이후 동의, 프로젝트 만들기를 눌러주면 됩니다.

Firebase에서는 많은 서비스를 제공하는데 이번에 사용할 서비스는 다음과 같습니다.

- Realtime database

- Cloud functions

- Hosting (option)

각각의 서비스의 시작 튜토리얼은 Firebase 에서 제공하고 있으므로 생략하겠습니다.

또한 외부 네트워크 연결이 필요하므로 Firebase 가격정책상 https://firebase.google.com/pricing/?hl=ko 종량제를 사용해야 합니다.

스킬응답을 위해 미리 개발한 프로젝트를 이용하도록 하겠습니다.

https://github.com/stories2/Kakao-Translate/tree/6df33334a13eae1e91ab91baf4a3cf4eb6abab2f 여기에서 프로젝트를 다운받을 수 있습니다.

해당 프로젝트는 아직 번역 기능이 추가되지 않은 프로젝트입니다.

스킬 개발 전 Kakao i open builder 응답 처리 형태

Kakao i open builder 에서는 이미 자세한 튜토리얼을 제공하고 있습니다. https://i.kakao.com/docs/getting-started-overview#%EC%98%A4%ED%94%88%EB%B9%8C%EB%8D%94-%EC%86%8C%EA%B0%9C

모든 내용을 이해하면 좋지만 쉽게 보면

- 시나리오에서 블럭을 만들었을 때 하나의 블럭에는 크게 발화와 응답으로 나누어집니다.

- 발화는 사용자가 카톡을 날리는 행위

- 응답은 그 행위에 장단맞춰주기

라고 보면 될것 같습니다.

응답에서 더 자세히 보자면

- 파라미터는 스킬 실행

- 응답 형태는 텍스트, 이미지, 컴포넌트, 스킬응답

으로 구성되어있습니다.

스킬 개발 전 프로젝트 구조

위에서 간단하게 발화, 응답을 형태를 확인하였습니다. 이를 응용하여 번역봇을 만들어 볼텐데 문제가 생깁니다.

번역을 하려면 사용자가 입력하는 모든 내용을 받아들이고 변환해주어야 합니다. 이를 위해서 모든 발화를 쓴다? 말도 안되는 소리지요.

Kakao i open builder 에서는 지정되지 않은 발화가 받아들여졌을 시 폴백 블록이라는 기본 블럭에 도달하게 만들어 줍니다. 이를 응용하면 됩니다.

사용자가 발화를 만들어내면 블럭에 따라 처리를 하며, 이때 스킬이 해당 유저의 상태를 저장을 합니다.

그 상태를 확인 하면서 다음 발화를 만들어 낼 시 이전 상태값을 참고하여 그 결과를 스킬로 만들어 응답하면 동적으로 응답을 구현 할 수 있게됩니다.

언어 선택 스킬 응답 만들기

카카오톡에서는 많은 컴포넌트의 응답 형식을 지원하고 있습니다. 우리는 간단하게 구현할 것이기 때문에 simpleText와 quick replies만 사용할 것 입니다.

자세한 내용은 https://i.kakao.com/docs/skill-response-format#quickreplies-%EB%B0%94%EB%A1%9C%EA%B0%80%EA%B8%B0-%EA%B7%B8%EB%A3%B9 을 참고하면 됩니다.

응답을 만들는 과정을 Firebase Realtime database에 기술하고 Firebase Cloud functions 에서는 DB에 정의된 응답을 반환하는 작업과 유저 관리, 번역 로직만을 기술할 것입니다.

{
  "actions": {
    "1": {
      "nextAction": [ "1000", "2000", "3000" ],
      "quickReplies": [
        {
          "action": "message",
          "label": " 한국어",
          "messageText": "한국어로 번역을 시작해줘"
        },
        {
          "action": "message",
          "label": " 영어",
          "messageText": "영어로 번역을 시작해줘"
        },
        {
          "action": "message",
          "label": " 일본어",
          "messageText": "일본어로 번역을 시작해줘"
        }
      ],
      "response": [
        {
          "simpleText": {
            "text": "새로운 번역은 언제나 환영이야!"
          }
        }
      ]
    }
  }
}

Firebase Realtime database 에 다음의 내용을 작성하면 언어 선택 스킬응답은 완료입니다.

위 내용을 해석하자면 다음과 같습니다.

- actions: 여러 스킬 응답 탬플릿 액션들을 가지는 object 입니다.

- 1: 임의로 정의한 action의 고유 번호입니다. 본 과정에선 언어 선택 부분의 스킬응답 고유 번호가 1이 됩니다.

- nextAction: 퀵 응답을 눌렀을 시 이동할 다음 action의 고유 번호 리스트입니다.

- quickReplies: 퀵 응답의 object 리스트입니다.

- response: 스킬 응답 템플릿 object 리스트입니다.

언어 번역 스킬 응답 만들기

{
  "actions" : {
    "1" : {
      "nextAction" : [ "1000", "2000", "3000"],
      "quickReplies" : [ {
        "action" : "message",
        "label" : " 한국어",
        "messageText" : "한국어로 번역을 시작해줘"
      }, {
        "action" : "message",
        "label" : " 영어",
        "messageText" : "영어로 번역을 시작해줘"
      }, {
        "action" : "message",
        "label" : " 일본어",
        "messageText" : "일본어로 번역을 시작해줘"
      } ],
      "response" : [ {
        "simpleText" : {
          "text" : "새로운 번역은 언제나 환영이야!"
        }
      } ]
    },
    "1000" : {
      "lang" : "ko",
      "nextAction" : [ "1" ],
      "quickReplies" : [ {
        "action" : "message",
        "label" : " 홈",
        "messageText" : "다시 메인으로 돌아가줘 "
      } ],
      "response" : [ {
        "simpleText" : {
          "text" : "%s"
        }
      }, "다시 홈으로 돌아가욧!" ]
    },
    "2000" : {
      "lang" : "en",
      "nextAction" : [ "1" ],
      "quickReplies" : [ {
        "action" : "message",
        "label" : " 홈",
        "messageText" : "다시 메인으로 돌아가줘 "
      } ],
      "response" : [ {
        "simpleText" : {
          "text" : "%s"
        }
      }, "다시 홈으로 돌아가욧!" ]
    },
    "3000" : {
      "lang" : "ja",
      "nextAction" : [ "1" ],
      "quickReplies" : [ {
        "action" : "message",
        "label" : " 홈",
        "messageText" : "다시 메인으로 돌아가줘 "
      } ],
      "response" : [ {
        "simpleText" : {
          "text" : "%s"
        }
      }, "다시 홈으로 돌아가욧!" ]
    }
}

위 내용을 Firebase realtime database에 덮어 씌워주세요.

이번에는 새로운 action object 와 해당 action object 에 lang 키가 추가되었습니다.

사용자가 영어 번역을 요청했을 시 해당 사용자의 상태값은 2000이 되어있을 것이며 이때 모든 발화를 번역할 타겟 언어는 lang 에 정의된 en 이다 라는 것을 구현하기 위함입니다.

본격적인 번역을 시작하겠습니다. 다운받은 소스의 functions 폴더에서

npm i -save @vitalets/google-translate-api

를 작성하여 구글 번역 api npm 모듈을 설치합니다.

functions/Action/translateAction.js 에 다음 소스를 작성합니다.


exports.translateStringToOtherLang = function (request, response, callbackFunc) {
    const action = JSON.parse(JSON.stringify(request.action))
    const reqText = request.body["userRequest"]["utterance"]
    const translate = require('@vitalets/google-translate-api')
    global.log.debug("translateAction", "translateStringToOtherLang", "user data: " + JSON.stringify(request.user) + " action data: " + JSON.stringify(action))
    global.log.debug("translateAction", "translateStringToOtherLang", "req text: " + reqText)

    var makeResponseTemplate = function(responseText) {
        const responseManager = request.responseManager
        const util = require('util')
        var actionText = action["response"][global.define.DEFAULT_RESPONSE_TYPE_ZERO]["simpleText"]["text"]
        actionText = util.format(actionText, responseText)
        action["response"][global.define.DEFAULT_RESPONSE_TYPE_ZERO]["simpleText"]["text"] = actionText
        responseManager.pushTemplate(action["response"][global.define.DEFAULT_RESPONSE_TYPE_ZERO])
        for(var index in action["quickReplies"]) {
            responseManager.pushQuickReply(action["quickReplies"][index])
        }
    }

    translate(reqText, {to: action.lang})
        .then(result => {
            global.log.debug("translateAction", "translateStringToOtherLang", "translate result: " + JSON.stringify(result))
            makeResponseTemplate(result["text"])
            callbackFunc()
        })
        .catch(error => {
            global.log.error("translateAction", "translateStringToOtherLang", "cannot translate: " + JSON.stringify(error))
            makeResponseTemplate("이런, 번역 요정이 장난을 쳐버렸군요.")
            callbackFunc()
        })
}

request 로 부터 사용자 상태에 따른 현재 응답할 action 템플릿이 포함되서 들어오며, 사용자의 발화 내용은 reqest.body["userRequest"]["utterance"] 에 있습니다. 이후로는 action 템플릿에 사용자 발화 내용을 번역한 결과를 쓰고, 응답 관리자(responseManager)에게 템플릿을 전달한 다음 callbackFunc 을 호출함으로써 action 처리를 마무리 짓고 있습니다.

functions/Core/actionManager.js 에 다음 소스를 다음과 같이 수정합니다.

exports.executeOrder = function (request, response, actionIndex, callbackFunc) {
    const basicAction = require('../Action/basicAction')
    const translateAction = require('../Action/translateAction')

    const actionTable = {
        "1": basicAction.hello,
        "1000": translateAction.translateStringToOtherLang,
        "2000": translateAction.translateStringToOtherLang,
        "3000": translateAction.translateStringToOtherLang,
    }

    global.log.debug("actionManager", "executeOrder", "execute action #" + actionIndex)

    actionTable[actionIndex](request, response, callbackFunc) // <-- pass request, response, callbackFunc(flush response data)
}

여기서는 action 번호와 그 action 을 실행할 메소드를 매칭하는 작업을 합니다. 번역 action의 번호를 1000, 2000, 3000 으로 DB에 정의 했었기 때문에 1000, 2000, 3000 을 작성한 후 그 값을 번역 매소드인 translateAction.translateStringToOtherLang 으로 설정합니다.

이로써 스크립트 작업이 모두 끝났습니다.

스킬으로 사용하기 위해 firebase functions 에 배포를 합니다. 배포 한 후 자동으로 endpoint 가 생성됩니다.

언어 번역 시나리오 및 블럭 연동

Kakao i open builder 의 스킬 탭에 들어가 새로운 스킬을 생성합니다.

우린 크게 2가지 종류의 스킬을 만들것입니다.

- 각 블럭마다 적용할 action 스킬

- 폴백 블럭에 실행될 continue 스킬

스킬은 다음과 같이 작성하면 됩니다.

url 은 action/ 스킬 번호를 쓰면 됩니다.

1: 번역 선택

1000: 한국어 번역

2000: 영어 번역

3000: 일본어 번역

continue 스킬은

/v3KakaoApi/continue

형식으로 작성하면 됩니다.

그럼 다음과 갈은 스킬들이 생성됩니다.

폴백블럭 설정

초기화 후 continue 스킬과 밑에 스킬데이터 사용을 허용합니다.

사용자가 선택한 언어로 모든 발화가 번역되는 부분입니다.

번역/환영 블럭 설정

번역할 언어 선택 부분입니다.

환영 스킬을 적용 후 스킬데이터를 응답으로 설정합니다.

번역 블럭(영어) 설정

번역 스킬을 적용 후 응답은 번역 시작한다는 문구를 작성합니다.

이 경우 스킬과 응답이 동시에 실행되어 사용자 상태는 영어 번역 모드로, 카카오톡 화면에서는 번역 시작하겠다는 피드백 문구가 보여지게 됩니다.

베포 및 테스트

배포 탭에서 베포를 눌러주면 됩니다.

최종 소스는 https://github.com/stories2/Kakao-Translate 에서 받으 실 수 있습니다.