[SF Diving] 3일차 - Project configuration 및 기본 page layout design 완료

Seungho Ha·2020년 8월 19일
1

SF Diving

목록 보기
3/6
post-thumbnail

시작하며...

솔직히... 개발 3일차...라고 하기에 창피한 수준이기는 하다. 3일차가 맞기는 맞지만, 투자한 시간은... 음... 굳이 언급하지 말기로 하자. 뭐 시간을 조금 투자했어도 3일차에 개발한 내용은 맞으니까, 3일차...라고 하자... 이런 식으로 가다가는 내 project는 뭐 한 30일차나 되어야 완성될 수도 있겠지만... 개발 10시간차...같은 개발일지는 보지 못했으니까, 조금 아쉬워도 3일차 개발일지를 작성해 보기로 했다.

기본 page layout만 design하기

아직 내 스스로 나의 project에 대한 구상이 완벽하지 않아서 막연하게 뭉뚱그렸던 정도라서 그런 것도 있고, 또 내가 아직 개발자로서 성장하고 있는 단계이기도 하고, 뭐 이런 저런 이유가 있겠지만 결론부터 말하면...... backend부터 개발을 하려고 했지만, 생각보다 쉽지 않았다.
그래서 일단 쉬운(?) 부분부터 시작하기로 했다.

어제 작성한 ToDoList에서 1번 항목(AWS 가입/Filezilla 설치/AWS와 Filezilla 사용법 익히기)이 제일 쉽기는 하지만, 공부는 집중력이 좋을 때 해야하는 법...
그래서 내일 하기로 하고... 일단 오늘은 project의 기본 configuration을 잡고, 할 수 있는 부분까지 page layout을 design하기로 했다.

SF Diving의 project configuration

기본적으로 'my_project' folder 안에 기본 구성을 만들었다.
'static' folder에는 css/js file이 저장될 예정이다.
'templates' folder에는 html file이 저장될 예정이다.
전체적인 configuration은 아래 screenshot과 같으며, 이 글을 작성하는 시간(2020.08.19)을 기준으로 기본 page에 대한 layout만 design한 상태라 아직 main page의 details에 대한 부분은 만들지 못했다.
SF Diving project configuration

기본 page layout design

우선 1일차에 작성한 대로, 기본 page에는 3개의 page(login page/signup page/main page)가 존재한다. 그리고 main page에서 일부 영역을 활용해서 main details를 구현할 예정이며, 일부 page는 popup으로 대체할 예정이다.

기존에 구상했던 layout에서 달라진 점은, main page에서 'system time' 부분을 GNB(Global Navigation Menu)와 함께 넣었던 부분이 이상해서 footer 부분으로 넘겨서 page의 우측 하단에 표시하기로 한 부분정도이다.
그리고 물론 1차적으로 layout만 design한 것이기 때문에, 세부적인 button 기능은 구현하지 않았다. 쉽게 표현하면, html/css file만 완성(이후에 수정해야 할 부분이 있기는 하지만)하고, js file은 이후 backend 개발을 진행하면서 함께 작성할 예정이다.

오늘 design을 완료한 page는 아래와 같다.
Login page
Signup page
Main page

추가적으로 main page는 GNB에서 선택한 menu는 전체 div의 색을 다르게 하여 표현할 예정이며, LNB(Local Navigation Bar)에서 선택한 menu는 text의 색 및 굵기를 다르게 하여 표현할 예정이다.

마치며...

2주일이면 생각보다 꽤 긴 시간이고, web page 하나 정도 연습삼아 개발하기에 적당한 시간이라고 생각했는데, 생각보다 기본적인 내용에 대해서도 어렴풋이 알고 넘어갔던 것들이 많아서 시간이 꽤 오래 걸릴 것이라는 예상이 들기 시작했다.
그래도 천리 길도 한 걸음부터니까... 뭐 열심히 하다보면 완성할 수 있겠지!

profile
Bachelor of Mechanical Engineering -> Master of Mechanical Engineering (Intelligent Systems and Robotics Laboratory) -> IT Developer -> Next...?

0개의 댓글