01. 다시 시작하는 웹 개발 (Front개발을 해보자)

 

저번에 하던 웹 개발을 멈추고 새로운 웹 개발을 하게 되었다.

 

토이 프로젝트로 POPCAT을 따라 만들어 볼 예정이다.

https://popcat.click/

Pop Cat

 

프로젝트 자체는 간단해 보이지만 처음 써보는 라이브러리와 처음으로 백과 프론트를 분리해서 개발해 보기 위해 비교적 간단한 프로젝트를 기획했다.

 

개발을 하고 나서 docker를 이용해서 배포 까지 해 볼 생각이다.

 

나와 학교 친구 두명이서 각각 프론트, 백을 맡기로 했고 나는 프론트를 하게 되었다.

 

우리가 만들 프로젝트는 우리 학교의 각 단과대학별로 클릭 수를 경쟁하는 서비스를 만들어 보고자 한다. 학교 캐릭터 이름을 따서 POPDCU라고 지었다. 

 

우리가 사용할 프레임워크는 Vue+vuetify, Spring Boot를 사용할 계획이다.

 

로고를 만들어 보자

시작 하기 위해서 뭐부터 만들어 볼까 싶어 popcat사이트에 들어가 봤다.

 

제일 눈에 띄는 게 로고였다. 그래서 로고부터 만들어 보자 싶었다.

 

popcat사이트에서도 로고가 svg길래 나도 svg로 만들어야지 싶었다.

 

그런데, 나는 그래픽 툴에 대해서 아는게 없었다. 그래서 svg를 어떻게 만들지 싶어 요즘 많이 보이는 웹 그래픽 편집기를 사용했다. 

 

웹 편집기로 작업을 하고 내보내기를 하려고 하는데 svg파일로 export 하는 게 없는 게 아닌가? 그래서 일단 PNG파일로 export 하고 그 파일을 다시 다른 웹 사이트에서 SVG로 바꿨다.

 

내가 사용한 편집기들

https://www.capcut.com/ko-kr/tools/svg-editor-online

'https://www.iodraw.com/ko/svg

SVG 편집기 - ioDraw

 

PNG ==> SVG 변환

https://convertio.co/kr/png-svg/

PNG SVG 변환 (온라인 무료) — Convertio

 

두 번째 껄로 글씨를 만들고 첫 번째 걸로 약간의 수정을 했다.

 

이렇게 해서 만들어진 결과물이

로고다

요거다

 

 

나쁘지 않은것 같았다. 그런데 여백이 너무 많다. 이걸 어떻게 없애지 하다가 svg파일에서 viewBox 조금 수정하다 보니 얼추 괜찮아져서 그냥 쓰려고 했다.

 

그런데 문제가 생겼다. popcat사이트의 로고는 검은색 테두리에 흰색 글씨다. 그런데 내가 만든 로고는 그냥 검은 테두리 밖에 없고 나머지는 전부 투명이다. 그래서 웹에 넣어보니 휑한 게 좀 이상했다.

 

그래서 이 문제를 해결해 보고자 다시 툴을 찾아 봤다.

 

이번에는 웹 편집기의 한계를 느끼고 제대로 된 툴을 찾아봤다. 그러다가 찾은 툴이

 

개쩌는 Affinity Designer2

 

이거다. 앱스토어에서 다운 받았는데 윈도우도 있는지는 잘 모르겠다.

 

svg파일을 불러와서 그릴 수 있고, 그 파일을 다시 svg파일로 내보낼 수도 있다! 나 같은 디알못도 쉽게 썼고 좋은 툴이다.

 

그런데 30일 동안만 무료로 해주는 것 같다. 이후에는 돈 내야 되는 듯

 

왜 사람들이 돈 내고 비싼 프로그램 쓰는지 알 수 있는 경험이었다.

새로워진 로고

저걸로 만든 로고가 이거다.

 

여백도 없애고 글씨 안에 흰색으로 채워줬다.

 

프로젝트 시작

시작하기 위해서 우선 github organizations를 만들었다.

https://github.com/POPDCU

POPDCU

저장소도 front와 back으로 나눴다.

 

기본적인 틀을 만들기 시작했다.

main page

이게 결과물인데 나쁘지 않은 것 같다.

 

캐릭터는 우리 학교 캐릭터다. 귀엽다.

 

클릭했을 때 이미지

클릭 안했을 때 이미지

클릭했을 때 이미지랑 클릭 안 했을 때 이미지는 저렇게 할 예정이다.

 

밑에 보이는 보라색 버튼은 랭킹을 볼 수 있는 버튼으로 사용할 계획으로 위치만 잡아뒀다.

 

둘 다 svg이미지인데 크기 자이가 있지만 크기 키워도 문제없을 것 같다.

 

이번에 최대한 svg이미지를 사용하려고 한다. 이유는 그냥 깨지는 이미지가 싫어서 사용하려고 한다.

 

배경화면

배경화면이다.

 

배경화면 뭐 할까 고민하다가 그냥 요즘 ai가 사진 만들어 주는 게 유행하지 않는가? 그래서 한번 만들어 봤는데 괜찮아서 이거 쓰려고 한다.

 

겨울 이미지인데, 각 계절마다 배경은 바뀌게 만들려고 한다. 

 

저 이미지는 canva를 통해 만들었다.

https://www.canva.com/

 

재료 준비는 끝났고 이제 본격적인 개발을 시작하면 된다.

 

위에서 본 결과물은 gpt랑 만든 합작품이다. gpt 없었으면 front개발은 힘들었을 거다... gpt만세

 

다음에는 이제 클릭 이벤트, 키보드 이벤트를 감지하고 카운팅과 이벤트 감지에 따른 이미지 변화를 줘볼 생각이다.