오늘은 오전시간과 오후시간동안 이번주에 시작한 팀 프로젝트를 했다. 어제까지는 강의를 수강하랴 팀 작업 따라가랴 정신이 없었지만 오늘 하루는 온전히 팀 프로젝트에 집중할 수 있는 시간이었다.

 개인 페이지를 먼저 작업하게 되었는데, 웹 개발 종합반에서 수강했었던 것을 활용해서 페이지를 만들었다.

 아래는 오전시간동안 만들었던 결과물이다.

뭔가 동적인 느낌이 없어서 아쉬운 듯한 소개페이지

 페이지 베이스는 숙제로 했었던 팬명록을 활용해 만들었는데, 만든 결과물이 심히 마음에 안드는 느낌이였다. 그래서 오후시간동안 필수 구현 기능을 제외하고, 디자인부터 전부 새로 만들기로 했다.

 일단 페이지를 어떻게 구상할까 생각을 했을 때, 요즘 전자 제품들 페이지 광고가 딱 떠올랐다. 영감을 얻은 페이지는 삼성 Z플립 페이지인데 나도 내 소개 페이지를 스크롤 애니메이션을 활용해서 해야겠다 라는 생각이 들었다. 일단, 구현에 앞서서 역시 뭐든 정보를 찾을려면 구글링이 최고긴 한거같다. 내가 모르는것들은 다 적혀있다. 진짜로

 스크롤 애니메이션을 구현하기 위해서는 일단 가장 중요한것이 html의 구조를 이해하는 것이다. 웹 개발을 시작하면서 크게 생각하지 않았던 부분이였는데 처음부터 어렵게 느껴지더라. 

 대부분의 html 태그들은 기본적으로 static 속성을 가진다. 즉, 사용자가 어떻게 조작하더라도 페이지 내의 컨텐츠들은 다 정적인 이미지가 된다. 내가 오늘 처음 만든 소개 페이지가 바로 그렇다.  그리고, 다음 속성으로 fixed 속성인데, 이 속성은 뷰포트 즉, 화면공간의 좌표에 고정시킬수 있는 속성이다. 그러나, 내가 구현하고싶은거는 내가 스크롤링 함에 따라서, 무언가 움직였으면 하는데, 뷰포트 내에서 고정시킨 상태로 된다는 것은 내가 원하는 것이 아니다. 그래서 알아본 것이 바로 sticky 속성이다. sticky는 기본적으로 static과 fixed의 두가지 속성을 가지고있다. 내가 설정한 x와 y의 위치값에 도달하기 전에는 static 속성을, 각 위치값에 도달 이후에는 fixed처럼 동작하게되는 속성이다. 즉, 내가 구현하고 싶은 방식이다. 

 찾아보니 예제는 많았는데, 따라하기가 힘들었다.

예제를 보고 따라만든 연습페이지

 누가 만들었는지 모르겠지만 정말 잘만든 듯?하다

 예제를 따라 만들면서 태그간 속성, class의 이름이 어떻게 연결되는지도 배울 수 있었다. 특히 JS에서 C#에서도 활용했던 여러가지 코드의 생김새가 눈에 들어왔다. 역시 찾아보니깐 비슷한 내용이더라.

연습했던 예제를 활용해서 이제 내 소개페이지를 작성했다. 

예제를 적용한 나의 소개 페이지

 이제야 뭔가 있어보이는 소개페이지가 된거같다. 미니 프로젝트를 진행하면서 많은것을 배우는 것같다. 이번주 처음 웹 개발을 시작했는데 많은 코드를 따라서라도 쳐보니 뭔가 나오는것 같다. 첫 날에 느꼈던 감정들이 꽤나 많이 해소된 하루였다. 

 이제 내일은 팀 작업을 마무리하고 정리할 예정이다. 오늘 만든 개인 소개 페이지를 조금 더 손봐야겠다. 아직도 여러가지로 부족한게 느껴지긴한다.

 오늘은 어제에 이어서 오전과 오후시간에는 웹 개발 종합반을 수강 했고, 저녁 시간 이후에 팀원들과 모여 어제 못다한 미니 팀 프로젝트에 대한 회의를 하였다.

 

 오전 시간동안 웹 개발 종합반을 이어서 수강하였다. 결론적으로, 오늘은 완강하지 못한게 마음에 걸린다. 당장 미니 프로젝트를 진행해야하는데 아직도 나는 강의를 수강하고 있는 중이니 조급함만 느껴지는것 같다. 

 웹 개발 종합반에서 예전부터 관심있던 분야였던 웹크롤링, DB서버 관리 및 활용을 본격적으로 배워서 내심 좋았다. 특히 DB 관련해서 생각난 것이 있는데, 대학교때 한창 네트워크 강의를 들을 때, MySql을 활용할 기회가 있었고, 이 강의에서는 MongoDB를 활용했는데, 두 가지의 DB를 활용해 본 경험으로는 꽤나 MongoDB의 DB설계가 꽤나 흥미롭다고 생각되었다.  이러한 방식으로도 데이터를 활용할 수 있구나 하는 생각이 들었다. 미니 프로젝트가 끝나고, 둘의 차이에 대해 공부할 기회가 있었으면 좋겠다.

 그리고 4주차 강의에서 Flask 서버를 활용할 수 있는데, 아직 local 서버만 활용하여 무언가를 만들어서 외부에서 접속할 수 있는 서버를 구축하고 싶다는 생각이 들었다. 

 

 그리고 오늘 있었던 팀 회의가 있었고, 여러가지 의견을 나눴다. 특히나 느꼈던거지만, 나는 아직 팀 작업을 하기에 준비가 안되있는것 같다는 느낌이 강했다. 팀원들이 나누는 이야기에 적극적으로 참여할 수 없었고, 교류하기 어려웠다고 느꼈던것 같다. 같은팀 팀원분들은 벌써 개인 페이지를 다 작업하고, 메인 페이지를 만들려고 하니, 진도의 차이가 느껴진다라고 할까? 아직 내가 많이 부족하다는걸 느꼈다. 오늘 시간을 더 써서라도 개인페이지를 제작해야겠다는 생각이 들었다.

 

오늘 팀회의동안 만든 팀 메인 페이지 SA

 회의는 여러가지 이야기가 나왔던거 같다. 일단 제일중요한 웹페이지의 디자인 이야기를 하였고, 팀원들의 아이디어가 생각보다 좋았다는 느낌이였다. 왠지 이사람들과 함께가면 아이디어가 많이 생겨나지 않을까 싶었다. 특히 팀원분 중 한분이 우리팀 프로젝트에서 우리가 배운걸 활용한뒤 딱 한걸음만 더 움직일 수 있는 멋진 아이디어가 나와서 좋았던것 같다. 

 그렇게 회의는 좋은느낌으로 종료되었고, 여러가지 안건이 있었고 그걸 활용할 방법을 내일 아침 시간에 이어서 진행하기로 하였다.

 

오늘의 TIL은 뭔가 주절주절 이야기 하는것 같은 느낌이다. 일단 내게 무엇보다도 급한 것은 지급 받은 강의를 빠른 시간안에 완강을 하는 것에 목표를 둬서 크게 이야기를 쓸만한 것이 없었던거 같다. 지금 당장 겉햝기로 공부한 것은 꼭! 복습을 해야겠다.

 

TIL에 들어가기에 앞서서 나는 C#과 Unity Engine을 다루던 개발 지망생이였다. 이에 대해서 설명할 일이 생긴다면 자세하게 설명하겠지만, 지금은 설명하기 애매한 상황인것 같다.

 

오늘 첫 강의 OT와 미니 팀 프로젝트를 수행하게 되었는데, 내가 처한 상황에서는 어처구니가 없다라고 생각이 들었다.

이유는 HTML이나 CSS, JS에 대해서 하나도 모르는 상태에서 팀 프로젝트에 들어가게 되었는데, 내심 불안해 했기 때문에 그런 생각이 들었던 것 같다.

뭐 여튼 중요한 것은 내가 웹 개발을 시작했다는게 중요한 것이 아닐까?

 

대략적인 오늘의 일정은 다음과 같다.

시간 내용
오전 9:00 ~ 오후 12:55   개강 OT 및 미니 팀 프로젝트 팀원과 개발 프로젝트 계획 구상
오후 2:00 ~ 오후 3:40  Git 과 Github, Git bash
오후 4:00 ~ 오후 6:00  미니 팀 프로젝트 AS
오후 7:00 ~ 오후 9:00  개별 공부(웹 개발 종합반 수강)

1. OT 및 미니 팀 프로젝트 소개

 오늘 내가 느꼈던 최고의 멘붕이 이 시기였던거 같다. OT야 뭐, 대학교에서 커리큘럼 설명하는 것과 같은거라고 생각했던 만큼 무난하게 넘어갔지만, 미니 팀 프로젝트 소개때 나에게 문제가 생겼다. 나는 분명 웹 개발 종합반 수강을 하지 않았던 것 같은데 어째서인지 팀 프로젝트에 참가하게 되었더라 분명 발제 시간때는 강의를 수강하지 않은 사람들은 따로 조편성을 한뒤 강의를 집중적으로 수강한다고 했었고, 나도 그렇게 될거라고 생각했었는데, 그런게 아니였으니 말이다.

 이부분때문에, 팀 미팅에서 계속 어리둥절 + 멘탈 붕괴 상황에 처해있어서 팀 미팅도 제대로 못한 것은 이 자리를 빌어서 팀원들에게 사과하고 싶다. 내가 계속 멘탈붕괴 상황에 처해 있었는데, 나를 데리고서 미팅을 제대로 끝냈기 때문에 감사한 마음도 생겼다. "강의를 빠른 시기에 완독하고 프로젝트에 따라가도록 노력하여야 할 것" 이라 생각이 들었다.

 

2. Git과 Github

 이 부분에서는 꽤나 나는 꽤나 자신있는 영역이였다고 생각이 들었다. 왜냐면 대학생활 내내 깃허브를 끼고 살았고, 어느정도 자신있는 영역이기 때문이다. 그래서 어느정도 복습하는 느낌으로 강의를 들었던 것 같다. Git도 Git이지만, 오랜만에 (약소하지만) Linux 환경을 다룰수 있어서 꽤나 반가운 느낌도 들었다. 

 내 나름대로 블로그 포스팅을 할만한 주제가 생겼다고 생각이 든 시간이다.

 

3. 미니 팀 프로젝트 AS

 이 시간에 멘탈 붕괴된 상황에서 약간 회복된 상황이였던거 같았다. 그래도 팀원들이 하는 이야기에 끼어들 수 있는 상황은 아니였던거 같았다. 무엇보다도 내가 들어야할 강의 내용이 나왔는데, 아무것도 모르고 이야기하는걸 듣다보니 이부분은 따라가기 힘들더라. 빨리 강의를 완독해야지 라는 생각밖에 안들었다.

 

4. 개별 공부

 오후 6시이후 저녁시간부터 계속해서 웹 개발 종합반 1주차를 들었다. 본격적으로 웹 개발 강의를 듣기 시작한 시간이다. 일단은 지금시간에는 1주차는 다했고, 숙제까지 끝마친 상황이다. 항상 코딩 공부를 할때마다 느끼는거지만, 강의 실습시간 + 강의 듣는시간보다 개발환경 구성하는게 더 시간이 많이 걸리는거 같다. 

 1주차 강의는 HTML, CSS, JavaScript에 대해 맛보기로 배우면서, 실습하는 과정이 많았는데, HTML은 예전에 살짝 다뤄본적이 있어서 강의 내용자체는 다 이해가 되는거 같았다. 강의 보면서 좀 아쉬웠던 것은 JavaScript부분인데, 워낙 짧은 시간에 문법 강의를 하다보니 설명이 부족한것 같았다. 이 부분은 따로 찾아봐야할것 같다고 생각이 들었다.

 

1주차 강의를 끝내고 만든 결과물

 

 끝으로 오늘의 TIL, TMI를 마치며, 빨리 강의를 완독하고, 미니 프로젝트를 참여해야겠다는 목표가 생겼다.

+ Recent posts