개발과 기획 다하기

기능적인 부분은 이전 포스트에서 이미 완성이 되었기에, 디테일한 배치와 디자인에 착수했다. 이번 프로젝트의 목표 중 하나가 또 모바일을 고려한 반응형 웹이었기에 그것 역시 반영하려 했다. 일단은 부트스트랩에서 내비게이션 바를 가져왔다. 그런데 내비게이션 바에 띄울 요소가 하나도 없어서, 사이트 제목을 제외한 모든 요소를 삭제했다. 부트스트랩에서 가져온 이유가 하나도 없어지긴 했지만, 익숙해지면 직접 만드는 것보다 편할 것 같다. 다음은 버튼들을 손 봤다. 피그마에서 레이아웃을 가져와 그림자와 모양은 잡혀있었다. 따라서 배경색을 바꾸고, 부트스트랩에서 제공하는 glyphicon을 사용하여 아이콘을 집어넣었다. 모바일처럼 화면 크기가 줄어들었을 때도 버튼의 모양을 유지하기 위함이다. 을 사용하여 캔버스 및 ..

분명 처음 시작할 때 일주일 정도 안에 빡빡하게 하고 끝내려 했던 토이 프로젝트인데, 마지막 글을 쓴지 거의 한 달이 되어서야 다시 글을 쓰고 있다... 역시 흥미가 떨어지기 전에 빡세게 해둬야지 안그러면 늘어지는 것같다. 그래도 조금씩 진행을 해두었고, 개강 후 널널한 첫 주차에는 끝내야지라는 일념으로 95% 이상은 완성한 것 같다. 먼저 지난 포스트까지의 진행 상황은 사진과 같다. 사진 정보를 모델로 구성해 클래스화한 후에, 세 번째 사진까지 구현을 했다. 그리고 사진의 수를 좀 더 늘리고 더 복잡한 표현을 해보기로 했었다. 그에 따라 먼저 세 번째 사진에서 여러 줄 표현을 시도했다. 위 사진이 광고판이라기엔 너무 위아래가 휑해보였기 때문이다. 기본적으로 같은 원리로 그려주면 되지만 input을 하나..

이 프로젝트를 빠르게 해치우고 관두려 했는데, 2편을 쓴 시점부터 많은 날이 지났다. 그 이유는 일단 중간에 팀원과 Billboard hot 100 사이트 만들기를 진행했고, 그 도중에 파일을 혼동에 이 프로젝트의 html 파일을 날려 버렸기도 했기 때문이다... 따라서 오늘은 이전까지의 작업을 다시 복원하는 것으로 시작했다. 그 이후엔 저번에 발생한 다양한 문제들을 해결해보았다. 아래와 같다. 1. 텍스트의 길이에 따라 적절한 위치, 폰트 사이즈가 변화한다는 점 2. 줄바꿈을 적절히 해주는 기능이 없다는 점 3. 사진에 따라 폰트, 폰트 사이즈, 색, 위치 등을 바꿔줘야 하기에 사진마다 이 정보를 저장할 자료구조가 필요하다는 점 1. 폰트사이즈와 베이스라인 조정 먼저 1번 문제 해결에 착수했다. 가장 ..

1. Canvas의 그림 로컬로 다운받기 레이아웃을 띄우고 난 후에는, 곧바로 캔버스를 활용해 핵심 기능을 구현해보았다. 웹프로그래밍 수업을 통해 캔버스로 그린 그림을 url로 변환해 다운받을 수 있음을 배웠지만, 이는 별개의 image 태그를 사용해 그림을 다시 띄우고, 이를 '우클릭-저장'을 통해 받아오는 방식이었기에, 내가 원하는 기능에 맞게 변형이 필요했다. 구글링을 통해 이를 쉽게 해결할 수 있었다. html의 a태그에 download라는 속성이 있었기 때문이다. a가 가지는 href에 해당하는 url을 download의 값을 파일 제목으로 가져올 수 있었다. 해당 내용 MDN 하지만 이를 위해서는 링크를 눌렀을 시, canvas의 url을 a의 href값으로 설정해주는 작업이 필요했다. 수업에..

저번 학기 웹 프로그래밍 수업을 들으며 canvas라는 기능을 상당히 인상깊게 보았다. 일상 생활에서 드로잉 앱들과는 다르게 상당히 불편하게, context를 부르고 stroke()하며 그림을 그려야 한다고 생각했다. 다만 동시에 도형 뿐만 아니라 이미지, 애니메이션, 텍스트, 비디오 등을 모두 그려낼 수 있다는 점이 놀라웠다. 그러다 문득 만들어보고 싶은 사이트가 떠올랐는데, 사용자가 텍스트를 입력하면 각 사진에 자연스러운 형태로 그 텍스트를 합성해주는 사이트다. 카톡을 하다보면 시기적절한 '짤'을 만들어 실시간으로 사용하고 싶은 순간들이 있었기에, 이러한 순간들을 해결해보고 싶었다. 지금 시기에서야 이를 구현해 볼 실력과 여유가 생긴 것 같아, 프로젝트를 간단히 진행해보려 한다. 사실 unity로 만..