개발과 기획 다하기

이번 학기는 유독 팀플이 많았다. 소프트웨어 공학 수업에서도 팀프로젝트를 진행했다. 목적은 소프트웨어 공학론을 팀별로 적용해보기 위해 자유주제로 개발 팀 프로젝트를 진행하는 것이었다. 우리 팀은 웹으로 crud기반의 최대한 간단한 서비스를 만들기로 했고 우정퀴즈를 제작하기로 했다. 기획은 다 같이 진행했다. 출제자가 자신의 이름으로 7문제를 내면 URL이 생성된다. 응시자는 해당 URL을 통해 문제를 풀 수 있고, 점수판에 이름을 올릴 수 있다. 사용한건 HTML, CSS, Django 위주였다. 나같은 경우에는 멋쟁이 사자처럼을 통해 한번 배운 경험이 있으나 팀장님을 제외한 나머지 팀원분들은 관련 경험이 없어 걱정이 많았으나, 지금 뒤돌아보면 다들 공부를 열심히 하셨는지 자신의 맡은 바를 충분히 다 해..

많은 학점의 수업을 듣느라 2학기에는 별다른 대외활동이 없었다. 원래 멋사의 2학기에는 많은 학교들이 한 곳에 모여 개발을 하는 전체 해커톤 행사가 있는데. 코로나 때문에 이 해커톤이 상당히 제한적으로 이루어지게 되었다. 고맙게도 우리 학교의 운영진분들이 다른 학교들과의 연합 해커톤을 잡아 오셔서, 일정이 많았지만 참여하기로 했다. 이번 연합 해커톤의 이름은 '단풍톤'으로서 덕성여대, 동덕여대, 상명대, 외대 그리고 그 외 학교의 참여자들이 섞여서 팀을 구성했고, 주제는 거의 자유였다. 팀을 배정받았고, 두 분이 프론트 한 분이 백엔드를 이미 희망하셔서 django에 대한 자신은 없었지만 백을 해보기로 했다. 우리 팀은 회의를 통해 자신에 대한 위키(사전)을 만드는 서비스를 만들어 보기로 했다. 회의 과..

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

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

수료증이 오면 써야지 했던게 수료증이 오지 않아 후기가 이렇게나 늦어졌다. 교내 AI교육원에서 여름방학간 코테 캠프 참여자를 모집했고, 알고리즘를 한창 해오던 나에게 좋은 기회라 생각되어 신청하였다. 중급반으로 참여하였고, 2주간 총 5번 15시간의 세션과 한 번의 모의고사로 진행되었다. 주제는 각각 백트래킹, DP, DFS/BFS, 구현이였다. 교내 교수 분들이 한 것이 아니라, 외주를 맡겼는지 '코드트리'라는 서비스에서 강의를 맡았고 그 때문에 코드트리 사이트에서 문제를 풀었다. 우리는 무료로 코스들을 볼 수 있었지만 원래는 유료 서비스이다. 문제마다 강의와 해답을 볼 수 있기는 하지만, 문제의 종류는 오히려 무료 사이트(백준, 프로그래머스)의 새발의 피도 못미친다. 개인이 굳이 결제해서 볼 필요는 ..

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

멋사 미니 해커톤을 진행하면서 많은 내 자신의 부족함을 많이 느꼈다. 그 덕에 팀원들도 고생이 많았을거다. 다음 미니 해커톤과 중앙 해커톤에서는 내 맡은 바를 충분히 해내고 싶었기에, 팀원 한 명과 같이 작은 프로젝트를 해보기로 했다. 이번 토이 프로젝트의 목적은, '해보고 싶은 거 다 해보자'이다. 미니 해커톤과 달리 시간 제한도, 결과물 발표도 없으니 그동안 궁금했지만 써볼 기회가 없었던 기능/서비스나 개인적으로 부진한 내용을 전부 시도해보자는 뜻이었다. 둘 다 API를 활용한 데이터 불러오기를 한번 더 해보고 싶었기에, 흥미로운 API들을 찾아 그에 맞춰 주제를 정하였다. 그리고 선정한 주제는 Billboard Hot 100이었다. 당일 빠른 진행을 위해, 전 날에 회의를 통해 아이디어를 모으고, ..

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

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

미니 해커톤은 각 팀들이 짧은 기간안에 주어진 개발 과제를 해내고 이를 공유하는 행사이다. 올 3월부터 시작된 멋쟁이 사자처럼의 활동들은 대부분 세션과 그에 대한 과제 위주였으나, 이번의 미니 해커톤을 통해 배운 것을 팀 단위로 실습해보는 기회를 가질 수 있었다. 미니 해커톤의 주제는 '영화평가 사이트 제작'이었다. api를 통해 데이터를 받아와 홈 화면에 보여주고, 상세 페이지에서 자세한 정보와 댓글을 볼 수 있는, 로그인과 회원가입이 가능한 사이트가 목표였다. 대부분의 요소는 기존에 배운 blog 과제들과 큰 차이가 없었지만 1) API 통신 2) Model 직접 설계 3) git을 통한 협업 은 경험해 본 적이 없었기에, 이번 미니 해커톤의 핵심 요소였다. 1) API 통신 이번 미니 해커톤에서는 ..