텍스트 합성 사이트 프로젝트 <1 - 설계 및 레이아웃 (feat. 피그마) >

저번 학기 웹 프로그래밍 수업을 들으며 canvas라는 기능을 상당히 인상깊게 보았다.

일상 생활에서 드로잉 앱들과는 다르게 상당히 불편하게, context를 부르고 stroke()하며 그림을 그려야 한다고 생각했다.

다만 동시에 도형 뿐만 아니라 이미지, 애니메이션, 텍스트, 비디오 등을 모두 그려낼 수 있다는 점이 놀라웠다.

 

그러다 문득 만들어보고 싶은 사이트가 떠올랐는데, 

사용자가 텍스트를 입력하면 각 사진에 자연스러운 형태로 그 텍스트를 합성해주는 사이트다.

카톡을 하다보면 시기적절한 '짤'을 만들어 실시간으로 사용하고 싶은 순간들이 있었기에,

이러한 순간들을 해결해보고 싶었다.

 

지금 시기에서야 이를 구현해 볼 실력과 여유가 생긴 것 같아, 프로젝트를 간단히 진행해보려 한다.

사실 unity로 만들던 게임을 빨리 매듭짓고 다른 걸 하고 싶었지만... 너무 손이 안간다.

 

가장 기초적 설계는 태블릿에서 그려서 진행했다. 생각하면서 날려써서 굉장히 악필이다.

이 정도만 적어두고 일단 개발에 바로 들어갔다. 토이 프로젝트니 흥미잃기 전에 빨리 하려고..

개발 상의 과제와 목표들은 위와 같지만, 내 개인적인 과제와 목표들은 다음과 같았다.

 

1. html, css, js, django의 전반적 복습

2. 이제껏 시도해보지 못한 api, 프레임워크 등의 도전

3. css서 모바일 화면 고려하기

4. 사이드 프로젝트를 진행하고, 기록하는 경험 얻기

 

1번 에서 django가 특히 부족하다고 느껴, django 상의 시도도 많이 해보고 싶은데

url 하나짜리 간단한 사이트라 django는 많이는 활용을 못해볼 듯 하다.

 

대신 2번에 대한 다양한 시도를 해보고 있다.

먼저 사이트의 레이아웃을 짜는데, 피그마(Figma)를 활용해보았다.

피그마는 웹에서 그래픽 협업 작업을 할 수 있게 해주는 서비스이다.

ui/ux 프로토타입 제작에 방점을 두어, 현재 각 모바일 기종의 화면크기에 다양한 레이아웃 및

그린 object의 css 제공 등을 해주고 있다.

 

피그마 작업 화면

나도 미숙하게나마 피그마를 통해 레이아웃을 짜고 해당 css를 가져와 사용해보았다.

버튼이나 인풋 등을 상용 ui 마냥 이쁘게 뽑을 수 있다는 게 아주 좋았다.

 

div와 canvas, input등을 배치해 대충 구성이 되었고, django에서 띄우는 것까지 했으니

이제 직접 canvas 요소들을 js 상에서 구현해보려 한다.

canvas에 대해 아는 것이 많지 않아, 유튜브에서 canvas에 대한 강의를 찾아 들었다.

 

6편까지 있어 엄청 넘기면서 들었다

다음 진행상황부터는 다음 포스트에서 적으려한다.