Phot_o_matic Programming

구글 어시스턴트(Google Assistant)는 다양한 행동과 통합을 제공하는 개인 음성 비서다. 이런 구글 어시스턴트를 사용하여 어떠한 앱을 실행시킬 때에, 캔버스를 이용하여 시각적 다양화를 도모할 수 있다. 목표 interactive canvas란? interactive canvas가 어떻게 움직이는가? interactive canvas를 이용하여 액션(action)을 만들기 intro I/O'19에서 구글은 Interactive canvas라고 하는 Assistant-based-framework를 발표했다. 이것은 개발자들이 스마트 디스플레이에 터치 입력과, 음성, 비주얼적인 것이 제공되는 풀스크린 앱을 만들 수 있도록 해주었다. 한동안은 Actions를 이용한 스마트 디스플레이용 게임이 ..

Programming/Mindchain 2019. 7. 26. 16:51

props react를 떠올려 보며 props를 이해해보자. props를 통해 특정 컴포넌트로 원하는 값을 주어지게 할 때 사용한다. kebop-case HTML 태그 내에서 props 값을 지정할 때에는 이름을 kebop-case로 작성해야 한다. script 내에서 props를 받거나 component 명명할 때에는, camelCase로 작성해도 자동으로 인식한다. props 받기 props는 컴포넌트 생성자 내에서 props: [props 이름]으로 받는다. webpack이 왜 필요한데? html 내에서 수많은 script src를 참고하는 경우가 있을텐데, 이 때에 보기도 어려울 뿐더러, 작성 순서도 고려사항이기 때문에 사용하는 데에 어려움이 있다. webpack을 사용하여 이런 문제를 해결해본다..

Programming/Mindchain 2019. 7. 25. 13:02

필요성 v-on, v-model 등의 삽입이 이뤄진 태그들을 재사용하고자 할 때에 유용하다. 기존에 작성한 태그의 코드를 그대로 복사하여 사용하게 되면, 모두 같은 data 객체를 공유하므로, 각각의 복사된 태그별로 data 내부 값을 새롭게 지정해주어야 한다. 그럼 또 각 data에 붙어있던 methods도 각각 새로 지정해줘야만 한다. 결국 복사된 태그 갯수만큼 data 객체, methods 크기가 불어나게 되어버리는 것이다! 코드의 중복은 지양해야한다 컴포넌트 (Vue.component('이름')) 반복되는 코드를 가진 태그를 묶는 최소단위. template, data, methods로 구성 template 원하는 컴포넌트의 태그 형태를 template에 담아 준다. react와 마찬..

Programming/Mindchain 2019. 7. 25. 11:31

기존에 존재하는 AI 단어 데이터베이스를 이용하여 제공되던 초성퀴즈와 끝말잇기 게임의 스핀 오프 버전을 만드는 것이 이번 프로젝트의 주제이다. 스핀 오프로 별도의 게임 앱을 만드는 것이므로, UI 디자인부터 새롭게 개편하게 되었는데, 이에 따라 디자인 시안을 구축하여 전문 디자이너와 미팅을 하는 과정이 선결되어야만 했다. 개발자 측에서 생각하고 있는 UI의 흐름과 필수적인 요소라고 생각되는 디자인적 부분을 제시하기 위하여 나름대로 시안을 짜서 회의를 소집하도록 한다. 유첨의 시안은 초안이므로, 디자이너 미팅 이후 얼마든지 변경될 가능성이 있다. 하지만 '게임'이라는 주제로 개발을 처음 해보는 입장에서, 이런 UI 디자인 및 흐름을 생각해보고 구축하였다는 것에는 특별히 의의를 두어도 될 것이라고 생각했다.

Programming/Mindchain 2019. 7. 24. 22:59

구글 어시스턴트는 actions과 intgreation의 hosting을 제공한다. Interactive Canvas란? 구글 어시스턴트에 빌드되어 있는 프레임워크이다. 개발자들이 대화 actions에 대하여 시각적인 경험을 추가할 수 있도록 해준다. 이 visual layer는 웹 앱으로 사용자와의 대화의 응답으로써 보내진다. 어떨 때 사용하면 될까? 풀스크린 화면을 만들 때 커스텀 애니메이션과 이동을 구현할 때 커스텀 레이아웃과 GUI를 만들 때 데이터 시각화 비디오 플레이백 실행 작동하는 방법 커스텀 Conversational Action 웹 앱 Assistant Canvas ImmersiveResponse 1) 커스텀 Conversational Action -> 대화 인터페이스를 사용하여 사용자의..

Programming/Mindchain 2019. 7. 22. 16:51

그리기를 더욱 매력적으로 만들 수 있는 캔버스 옵션을 살펴볼 차례이다. 다른 색상, 선 스타일, 그라디언트, 패턴, 그림자 등을 추가할 수 있다. 도형변수.fillStyle = color -> 도형을 채우는 색을 설정 도형변수.strokeStyle = color -> 도형의 윤곽선 색을 설정 fillStyle 예시 ex) &lt!DOCTYPE html> &lthtml> &lthead> &ltmeta charset="utf-8"/> &ltscript type="application/javascript"> function draw() { var ctx = document.getElementById('canvas').getContext('2d'); for (var i = 0; i &lt 6; i++){ for..

Programming/Mindchain 2019. 7. 22. 15:25

코드를 단순화하고, 성능을 향상시키기 위하여 최근 버전의 브라우저에서 사용할 수 있는 Path2D objects 를 사용하여 이러한 드로잉 명령을 캐시하거나 기록할 수 있다. 기존의 방법들 보다 빠르게 경로를 실행시킬 수 있다. Path2D Path2D() 생성자는 새로운 Path2D 객체를 반환한다. 선택적으로 다른 경로를 인자로 받거나, SVG 경로 데이터로 구성된 문자열을 받아서 객체로 반환한다. new Path2D(); // empty path object new Path2D(path); // copy from another Path2D object new Path2D(d); // path from SVG path data moveTo, rect, arc, quadraticCurveTO 등의 모든..

Programming/Mindchain 2019. 7. 22. 15:15

호(arc) 호나 원을 그리기 위해선 arc() 혹은 arcTo() 메소드를 사용 arc(x, y, radius, startAngle, endAngle, anticlockwise) -> 원점은 (x, y) -> 반지름은 radius -> startAngle에서 시작하여 endAngle로 끝(각도는 radian 값을 사용) -> 주어진 anticlockwise 방향으로 향하게 (true이면 반시계, false면 시계 방향) -> 호를 그린다 arcTo(x1, y1, x2, y2, radius) -> 주어진 제어점들과 반지름으로 호를 그린다 -> 이전의 점과 직선으로 연결 ex) &lt!DOCTYPE html> &lthtml> &lthead> &ltmeta charset="utf-8"/> &ltscript ..

Programming/Mindchain 2019. 7. 22. 15:09