[201226] 웹 포트폴리오 개발 일지 02

.

 

포스팅이 많이 늦어졌다... 면목이 없다 

 

늦은 이유라고 하자면, 첫 번째는 일상 글에도 올렸듯이 졸업작품에 더 열중하고 싶어서 포트폴리오 개발을 소홀히 한 탓이다. 물론 내가 빈둥거린 탓도 있다...

두 번째로는 프론트엔드 개발이 내 생각 이상으로 어려웠다... html이나 css도 대부분을 잊어버려서 거의 처음부터 배우는 느낌으로 시작했다. js도 몰라서 앞으로 개발을 해가면서 유지보수 하는 식으로 기능을 추가해야 한다. 그렇다고 대충 만들자니 성에 차지 않았다. UI 개발에 대한 일정을 따로 잡아야했는데 간과했다. 

 

 

그래도 프로토타입과 비슷하게 만들어진 것 같기도 하고... 개인적으로는 만족스럽다. 

 

.

 

졸업작품 제출이 11월 26일에 끝났고, 11월 마지막 주부터 오늘 12월 26일까지 상세설계를 진행하고 UI를 개발했다. 확실히 시간이 오래 걸린걸 보면 놀면서 한게 티가 난다. 앞으로는 spring을 배워가면서 백엔드 개발을 시작하고, UI에서 부족한 점도 추가할 예정이다. 지금도 인프런에서 spring 강의를 들으면서 공부를 하고 있다. 

 

현재 진행도는 다음과 같다. 

 

- 기본 설계, 상세 설계 완료 

- 대략의 UI 개발 완료 

 

앞으로의 계획은 다음과 같다. 

 

- spring5 공부 후 적용 

- mysql database 연동

- javascript 적용한 유지보수 

 

상세한 요구사항은 엑셀 문서를 사용해서 관리하고 있다. 

 

.

 

UI 설계를 하면서 힘들었던 점은 CSS였다. 전공 수업을 들을 때도 CSS 부분은 대충 했고 웹 프로젝트를 할 때도 일절 손대지 않았기 때문에, CSS에 관한 지식이 노베이스에 가까웠다. CSS는 개발자의 영역이 아니라서 같은 이유는 아니고, 단순히 내가 그걸 하고싶지 않았기 때문이다... 그리고 이번 프로젝트를 진행하면서 더욱 확실히 느낄 수 있었다. CSS를 잘 하게 되면 재미있게 느껴지겠지. 

 

UI를 쉽게 개발하기 위해 부트스트랩을 사용했는데, 소스를 뜯는 과정에서 부트스트랩에서 작성한 CSS를 이해해야했다. 여기서 많은 시간이 걸렸다. 가장 힘들었던건 flex와 grid였다. flex는 아래 블로그에서 많은 도움을 받았다. 

studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

 

그리고 내가 만든 웹 사이트의 일부이다. 

간단한 커스텀 리스트인데도 만드는데 꽤 시간이 걸렸다...

기회가 된다면 나도 블로그에 정리해보고 싶은데, 명료하게 정리하는게 가능할지 모르겠다. grid는 아직도 뭔지 잘 모르겠다... 부트스트랩 document를 읽고 이해해서 구현했다. 하지만 내가 flex나 grid를 자유자재로 사용할 수 있다면 정말 멋지겠다는 생각은 들었다. 

 

그래도 내가 어려운 웹을 만드는 건 아니라서, 계속 개발을 하다보니 같은 작업의 반복이라는 걸 알 수 있었다. container 클래스 아래에 row, column을 넣고 부트스트랩에서 제공하는 spacing 기능으로 margin과 padding을 적용해주면 대략 예쁜 UI가 나오는 것 같았다. 

 

ide로는 atom을 사용했다. visual studio code만 써봤기 때문에 atom은 어떤지 궁금해서 써본건데, 계속 버벅거리는 일이 많아서 사용이 편했는지는 잘 모르겠다. 드래그를 할 때마다 스크롤이 이동하길래, 아톰 자체의 설정 문제인 줄 알고 한참을 구글링하다가 그냥 아톰을 종료하고 재실행했더니 해결되었던 적도 있다. 그리고 emmet을 사용했는데 문법을 잘 이해하지는 못했다. 이것도 나중에 블로그에 정리하고 싶다. 

 

글을 모두 작성하고 나니 근황글과 다름이 없어져서 머쓱하다. 앞으로는 정말 열심히 해야겠다는 생각만 든다... 

 

그리고 지금까지 만든 웹 페이지만 깃에 올려보았다. spring을 추가할 걸 생각하면 새로운 깃 저장소에서 형상관리를 하게 될 것 같지만, 그래도 웹 페이지만 따로 나눠서 업로드하고 블로그에도 올리고 싶었다. 

github.com/hjk997/pf_project