디자이너 개발로그

[Canvas] Canvas API에 대해 알아보자.

최근 참여 중인 프로젝트에서 SVG 못지 않게 많은 부분을 차지하고 있는 것이 바로 이 Canvas인데, 그 전에도 QML쪽에서 어떤 요소들을 그릴 때 가볍게는 사용해 본 적이 있지만 아주 본격적으로 써본 적은 없어서 많은 어려움을 겪었었고, 지금도 살짝 남아있다. Canvas에 대해서도 공부해보면서 그 기록을 남기고자 한다.Canvas API는 Javascript를 활용해 그림을 그리는 API(Application Program Interface)로, 주로 2D 그래픽에 초점을 두고 있으나 3D 그래픽도 제한적으로 지원하는 인터페이스이다. 때문에 Javascript 문법을 많이 따르며, Javascript 숙련도가 높으면 비교적 쉽게 다룰 수 있는 API이다.HTML의 엘리먼트나 QML의 Canvas..

[SVG] SVG에 대해 알아보자.

최근 작업 중인 프로젝트에서 SVG를 조작하고 사용할 일이 있는데, 아직 SVG에 대해 자세히 알지 못하는 부분들이 있다보니 꽤 어려움을 겪었던 내용이 있었다. 그래서 이번 기회에 SVG에 대해서 자세히 알아보면서 내용을 정리해두고자 한다.1. SVG란SVG를 그 전에도 많이 접하고 직접 많이 만들기도 했었는데, 정확한 용어의 정의는 이번에 알게 되었다. SVG는 Scalable Vector Graphic의 약자로, '크기 조작이 가능한 벡터 그래픽'이라는 의미이다. 말 그대로 벡터 그래픽이기 때문에 확대하거나 축소해도 래스터화(Rasterized) 된 비트맵(Bitmap) 이미지와 달리 계단 현상(Aliasing) 문제가 생기지 않는데, 그래픽 자산 자체가 선과 색상 정보 등을 좌표와 코드로 가지고 있..

[QML] 반복되는 요소 구현하기: Repeater

우리가 기계를 사용할 떄 얻을 수 있는 이점은 크게 두 가지인데, 누군가 관리하고 있지 않아도 알아서 조건에 맞춰 동작하는 것(조건화)과 반복적인 일을 대신하는 것(반복화)일 것이다. 흔히 if절과 for절로 설명되는 이 두 기능은 많은 코딩언어에서 비슷한 문법으로 작동하는, 매우 주요한 기능이기도 하다.그러나 QML에서는 이들이 조금 다르게 작동하는데, 어디까지나 마크업 언어이기 때문에 일반적인 프로그래밍 언어에서처럼 if절이나 for절을 선언할 수 없기 때문이다. 그래서 if절도 for절도 각각 우회적인 방법으로 구현되는데, 그 중 오늘은 for절과 대응되는 컴포넌트인 Repeater를 살펴보고자 한다.Repeater는 이름 그대로, 반복되는 요소를 넣기 위한 컴포넌트 요소이다. 지난 글에서의 Row..

마크업에서 가장 많이 사용하는 것 중 하나가 바로 레이아웃 관련된 내용일 것이다. QML에서는 레이아웃에 관련하여 세 가지 기능을 제공하는데, Grid와 Row와 Column이 그들이다. 이들을 잘 몰랐을 때에는 Item에서 살펴봤던 anchors 속성을 사용하거나 x.y 좌표를 사용해 배치를 잡는 경우가 많았는데, 각각 특성이 있어 원하는 목적에 따라 잘 알고 사용해야 하며, 사실 레이아웃을 위해 만들어진 컴포넌트는 이 셋이므로 되도록 이들을 사용하는 것이 안전하다.1. RowRow는 말 그대로 행으로 배치되는 요소들을 정의한다. 즉, Row의 자식 요소들은 자동으로 가로로 배치된다.Row { width:parent.width height:200 spacing:5 Item { id:i..

HTML(HyperText Markup Language)에서 가장 기본적인 요소를 꼽으라면 와 같은 태그가 될 텐데, QML에서는 Item이 이와 비슷한 지위를 갖는다. Item은 말 그대로 단순히 어떤 물체를 정의하는 것인데, 많은 컴포넌트 요소가 이 Item을 상속받아 사용하며, 따라서 Item이 가진 속성의 대부분이 공용되는 반면에 Item은 다른 컴포넌트의 많은 속성들을 사용할 수 없기도 하다.Item이 갖는 대표적인 속성들이 주로 크기와 위치에 관계된 속성들로, 예를 들어 x,y, width, height와 같은 기본적인 레이아웃 관련 속성들과 anchors와 같은 바인딩 관련 속성이 그것이다. 우선 x, y, width, height의 경우 그 이름 그대로 x좌표, y좌표, 너비, 높이를 의미..

통계에서 means는 의미가 아닌 '평균'을 의미하는 말로, K-means의 means 역시 이름을 보면 평균을 활용하는 군집분석(Clustering)일 것임을 알 수 있다. 그렇다면 K-는 무엇일까? 일반적으로 K-라는 말이 상징하는 수많은 단어들이 떠오르지만, 사실 여기에서 K는 큰 의미가 없이 단지 미지수 x나 정해지지 않은 숫자를 표현할 때 주로 사용되는 n과 같은 의미이다, 일상에서는 이러한 경우에 n이 더 많이 사용되지만, 수학이나 알고리즘에서는 k가 많이 사용되는 것이 그 이유라고 할 수 있다.즉 이 방법의 이름을 정리하면 K개의 평균으로 군집화하는 분석이라고 설명할 수 있다.그래서 K-means Clustering의 가장 첫 번째 절차는 몇 개(k)의 군집을 만들 것인지를 정하는 것이다. ..

QML은 최근의 다른 여러 프론트엔드 프레임워크 및 라이브러리들과 마찬가지로, 컴포넌트형 모듈화를 지원한다. 유사한 언어에서의 경험이 있다면 굉장히 쉽게 이해할 수 있지만, 웹의 기본 마크업 언어인 HTML에서는 지원하지 않는 형태라 HTML만 접했던 상태라면 낯설게 느껴질 수 있다. 하지만 매우 단순하니, 절대 겁먹을 필요는 없다.1. 같은 폴더 상에 위치한 QML 불러오기만약 폴더 트리 상 같은 경로에 있는 QML이라면, 단순히 그 QML의 파일명을 적는 것만으로 모듈을 불러올 수 있다. Container라는 컴포넌트를 작업하면서 같은 폴더에 저장된 Joystick이라는 컴포넌트를 부르고 싶다면,//Container.QMLItem { width:500 height:300 Joystick { ..

QML에서 중요한 개념이 바인딩 (Binding)인데, 이 바인딩을 잘 활용하는 것이 QML의 사용성을 매우 높여줄 수 있는 동시에 이로 인한 오류가 QMl을 다루는 데 있어서 가장 스트레스를 주는 요인이기도 하기 때문이다. 때문에 먼저 그 개념을 정확하게 이해하고 갈 필요가 있다.바인딩은 말 그대로, 둘 이상의 사이를 엮는다는 의미이다. 단순히 이 문장으로는 이해하기 어렵기 때문에 간단한 예제를 통해 살펴보면,Item { id:idItem width:500 height:500}Rectangle { anchors.centerIn: idItem width: idItem.width * 0.5 height: idItem.height * 0.5}위의 예시에서 Rectangle 컴포넌트는 I..

우리는 어떤 일을 할 때 과거의 기억을 활용한다. 카메라를 활용할 때에는 카메라에 대한 기억이 단서가 된다.처음 보는 카메라라도, 우리는 카메라에 대한 기억을 통해 하나하나 뜯어보는 대신 뻔한 것들을 건너뛰고 새로운 정보를 이해하고 처리한다. 시스템 역시도 그렇게 반복될 내용들을 기억할 수 있다면 더 빠른 처리가 가능해질 것이다.useMemo는 그러한 캐싱(caching)을 해주는 훅이다. 캐싱이란 과거에 처리했던 데이터를 임시적으로 저장하여 새로운 처리에 활용하도록 하는 것을 의미하는데, useMemo는 이러한 기억의 역할을 한다. 기본적으로 리액트는 어떤 컴포넌트를 호출할 때마다 그 내부에 선언된 기능을 다시 실행하는데, 컴포넌트가 복잡하다면 이는 많은 낭비를 초래한다. 데이터에 변화가 있다면 당연히..

Write once, compile anywhereQt는 C++을 기반으로 하는 그래픽 사용자 인터페이스(GUI) 프레임워크로, 엔진에 해당하는 C++언어와 표시 언어인 자체 규격의 QML 두 가지 언어를 활용한다. LGPL 또는 GPL 라이센스를 적용하는 대부분의 라이브러리 특성 상 코드를 공개할 경우에는 비 상업적인 용도 한정으로 무료로 사용할 수 있지만, 상업적인 용도로 쓰거나 코드 공개를 하지 않으려면 라이센스 비용을 지불해야 한다.크로스 플랫폼을 지원하는 장점이 있으나 태생이 데스크톱 환경으로 출발하여, 모바일 환경에 대한 최적화가 아주 좋은 평가를 받고 있지는 못하다. 그러나 버전이 오르면서 개선이 이뤄지고 있으며, 해외에서는 많은 프로그램들이 Qt로 만들어지고 있어 글로벌하게 본다면 장래성이..