[웹 프로그래밍] 나만의 사이트 만들기

2학년 1학기 웹 프로그래밍 강의에서 만든 기말 과제물, 나만의 사이트 만들기에 관한 설명이다.

---

서문

처음 웹 과제를 제출할 때는 조건에만 맞춰서 대충 만들어 제출하였다. 그런데 나중에 최종발표할 때 다른 사람들 작품들을 보니 너무 비교가 되어 내 차례가 되기 전에 싹 다 뜯어고쳤다. 그렇게 싹 뜯어고치는 과정에서 많이 배웠다.

웹사이트에 들어가면 처음 보이는 것들

My Personal Page

 

---

어떻게 만들것인가?

• 나는 CV를 만들었는데 아직 쓸 내용이 부족했고, 내용 간의 일관성도 없었다. 그래서 아예 카드 형식으로 내용간 독립성을 주는 내비게이션을 만들고, 들어가면 각자 내용에 맞는 레이아웃이 나오게 하였다. 일관성은 대문 페이지로 이동하는 홈버튼과 대문페이지의 양식만 유지했다.
• 비즈니스적인 CV보다는 '나를 소개한다'는 초점에 맞추어서 만들었다. 독서동아리, 코딩동아리, 그냥 지인 등 다 나에 대해 원하는 정보가 다를 것이다. 그때 각자 원하는 정보를 찾아볼 수 있도록 만들었다.
• 기존과 다른 형태의 네비게이션 바를 만든 이유는 2가지가 있다. 첫째, 내용 분류가 애매하다. 가령 내가 한 토이 프로젝트를 코딩 카테고리에 넣을지 커리어 카테고리에 넣을지 상위 카테고리를 정하는데 애매한 경우가 있다. 둘째, 네비게이션 자체가 반응형을 해칠 수 있다. 네비게이션 안의 글자가 길어지면 칸을 비효율적으로 차지하게 되고, 매번 화면 반응형에 맞게 글자 수나 항목들을 신경써주어야 한다. 따라서 2가지 고민을 해결하기 위해 기존 네비게이션 바를 없애고 카드형식으로 만들었다.
• 이렇게 각기 다 다른 페이지를 어떻게 일관성 있게 만들지 고민이 들었는데 내가 내놓은 해답은 일부러 최소한의 일관성만 유지하게 하는 것이었다.
• 이전에 만들었던 웹 테트리스도 프로젝트 페이지의 일부로 넣었다. (하단 링크 참조)
• 이렇게 만든 내용들은 자동으로 카드로 처리되어 계속 카드로 자동으로 추가할 수 있다.
• 카드로 된 내용을 label로 감싸서 글자말고 카드를 눌렀을때도 해당링크로 이동하도록 했다.

---

그 외

• html css js 간의 상호작용을 깨닫고 vercel을 이용한 배포까지 하니, 웹 자신감이 이전보다 훨씬 늘어났다.(하단 링크 참조)
• 그리고 꼬여버린 css 코드들을 보며 css는 가능한 필요한 것만 줄여서 적용해야겠다 깨달았다. css 여러 개 부모에서 적용되고 자식에서 적용되고 css 코드 순서에 따라 달라지고 하는 걸 보면 답답해졌다.
• 반응형으로 만들긴 했지만, tetris 같은 페이지는 키 입력을 받기에 PC에서 보는것을 권장한다.

•  

---

결론

• 프런트엔드는 디자인이 중요한데 이건 나보다 뛰어난 사람들이 디자인 한 작품들을 참고하는 게 맞다. 괜히 혼자 해보겠다고 하면 시간은 많이 드는데 그만큼 결과물은 안 나온다.
• 그 과정에서 나는 codepen의 디자인들을 이용했는데, codepen은 한두 개의 특수한 디자인을 넣을 땐 적합하지만, 전체적인 밸런스를 맞추는 데는 적합하지 않아 bootstrap을 쓸걸 후회했다.
• 비유를 하자면 codepen은 피자 탕수육, 마라탕, 짜장면 등을 다 단품으로 제공해서 골라먹는 디자인을 제공하고, bootstrap은 통합적인 정식 세트메뉴가 나온다. 그런데 나는 모든 페이지를 각기 다다른 codepen코드를 적용해 만들어서 마라 피자탕수육짜장면이 완성되었다.
• 동아리 멋쟁이 사자처럼에서 배운 웹지식도 연계하여 도움이 되었다. 동아리에서 배운 Next.js를 사용해 만든 건 아니어서 이를 나중에 기존 지식과 연계하여 만드는 법을 배워나가야겠다.

 

2학년 1학기 과목들: 나는 무엇을 배웠는가?

 

JavaScript로 테트리스 만들기, 코린이가 코린이를 위한 A-Z 설명