[멋쟁이 사자처럼] 멋사 9기 아이디에이션(feat. 예비 집사를 위한 웹사이트😺)

지난 이야기🌿

2주 차 세션에서는 HTML과 CSS로 자기소개 웹페이지를 만들고 깃허브로 배포했다.

 

 

5주 차(2021.04.26-2021.04.29)

2주간의 중간고사 기간을 끝내고 돌아온 5주 차. 5주 차에는 각자의 아이디어로 웹사이트를 만들고 서로 이야기하는 아이디에이션을 진행했다.

* Ideation (creative process):  Ideation is the creative process of generating, developing, and communicating new ideas, where an idea is understood as a basic element of thought that can be either visual, concrete, or abstract(출처 위키피디아).

 

1) 월요일

팀원들과 함께 아이디에이션 준비를 했다.

 

나는 어떤 웹사이트를 만들까 하다가 떠오른 주제는 바로바로 고양이!

 

예비 집사를 위한 웹사이트

아이디어

최근 몇 년간 반려동물에 대한 관심이 꾸준히 증가하고 있다. 나도 동물, 특히 고양이를 사랑하는 사람 중 한 명이다. 스무 살 때 처음 온 이 동네에는 고양이가 참 많았다. 학교를 오가다 보면 길고양이들을 심심찮게 발견할 수 있었고, 나는 어느 순간부터 그 앞을 쉽게 지나치지 못했다. 햇볕이 따스한 날이면 괜히 학교 안을 돌며 고양이와의 우연한 만남(?)을 기다렸고, 집에 돌아오면 고양이와 함께 할 날들을 상상했다.

 

이건 분명 나만 하는 상상이 아닐 거야, 라는 생각에서부터 아이디어가 나왔다. 그리고 나처럼 마음속에 고양이 한 마리씩 품고 있는 사람들을 위해 '예비 집사를 위한 정보 공유 웹사이트'를 만들기로 했다.

 

웹사이트 구상

완벽한 웹사이트가 아닌, 말 그대로 아이디에이션을 위해 간단하게 만드는 것이 목표이기 때문에 3페이지 정도를 구현하기로 했다(물론 아이디에이션으로만 끝내는 건 아님).

 

처음에는 무작정 html 파일에 <div>부터 치고 보려 했는데 운영진 해솔님의 도움으로 대략적인 구상부터 시작할 수 있었다. 아래 사진은 팀원들 사이에서 이것저것 적어본 것들이다.

 

 

예비집사를 위한 웹사이트의 시작

 

한 번 그려보고 나니 생각 정리도 되고 레이아웃을 어떻게 배치할 지도 떠올라서 좋았다.

 

웹사이트 구현

구상한 것들로 웹 사이트를 만들었다. 팀원들과 함께 모여서도 몇 시간을 했지만, 집에 와서도 한참을 만지작댔다. 

 

Page 1

 

 

Page 1. HOME 

• 예비 집사를 위한 웹사이트를 소개하는 페이지
• 오른쪽 위 MENU를 누르면 페이지 이동
• [개발자와 대화하기]를 누르면 내 이메일 주소로 연락할 수 있도록 설정(html, a 태그 mailto)

 

 

 

Page 2

 

Page 2. MENU

• 고양이에 대한 다양한 정보를 다룰 예정인 페이지
• 왼쪽 위 HOME를 누르면 페이지 이동
• 메뉴에 커서를 대면 가운데 줄이 그어지도록 설정(css, text-decoration 중 line-through)

 

 

 

Page 3

 

Page 3. 예비 집사의 정석 - 1장 마음의 준비

• 고양이를 데려오기 앞서 진지하게 고민해봐야 할 것들(유기동물 문제 등)을 알려주는 페이지
• 오른쪽 위 MENU를 누르면 페이지 이동
• 입양 또는 분양 전 놓칠 수 있는 부분을 리스트로 제작(html checkbox, css로 디자인 변경)

 

3페이지 남짓의 웹사이트지만 고양이에 대한 애정을 가득 담아서 제작했다. 부족한 부분도, 고치고 싶은 부분도 많지만 일단 깃허브 레포지토리로 배포 완료🙋‍♂️

 

2) 목요일

목요일인 오늘은 줌 아이디에이션 날. 각자 만든 웹사이트를 소개하고 질문받는 식으로 진행했다. 

 

구글 문서에 모인 9기 웹사이트

 

하나하나 가져올 수는 없지만 정말 재밌었던 이번 아이디에이션. 꼭 있으면 좋겠다 싶은 아이디어도 있었고, 기능이나 디자인을 잘 구현한 분들도 많았다. 다들 최고야...

 

아이디에이션 회고

• 며칠 만에 웹사이트를 만들다니. 그러려고 멋사에 들어온 거지만 이건 생각보다 더 멋진 일이다. 혼자 했으면 아이디어에서 그쳤을 수도 있고, 만들더라도 혼자 박수 짝짝 치고 끝났을 텐데 사람들이랑 공유하고 응원의 말도 들으니까 기분 좋다. 
• 발표는 무사히 마쳤지만 html과 css에 대한 공부는 한참 부족하다고 느꼈다. 기능도 기능이지만 레이아웃 배치하는 게 특히 어렵다. 중간에 다른 생각이 떠올라서 배치를 바꿔보려 했는데 어떻게 해도 이상했다. 중간에 수정해도 문제 없도록 레이아웃을 더 고민하고, 이것저것 구글링 해봐야겠다.
• 웹사이트에 대한 고민이 늘었다. 자료를 찾다 유기동물 통계에 놀랐고, 고양이와 함께 하다 보면 생길 수 있는 문제들도 여럿 발견했다. 물론 행복한 순간들이 더 많겠지만 입양(또는 분양) 전  꼭 알아야 하는 것이 있다는 건 분명했다. 나와 같은 마음을 가진 사람들이 한눈에 관련 정보들을 확인할 수 있는 웹페이지를 만들고 싶다. 단순히 외모가 귀여워서, 외로운 마음에 고민 없이 데리고 오는 일은 없길 바라면서!

 

웹 사이트 아이디어

• 기존 내용을 좀 더 구체적으로 보완
• 고양이를 키울 때 꼭 필요한 물건에 대한 정보 추가
• 고양이 예방접종 시기와 종류에 대한 정보 추가
• 고양이 입양 독려를 위해 관련 사이트 추가
• N년 차 집사들과 함께하는 Q&A 게시판 구현

· · ·

 

 

 

아이디에이션 준비로 바빴지만 그만큼 뿌듯했던 5주 차 세션 끝끝. 다음 주 장고 세션도 기대하겠습니다🦁

 

---

웹사이트 제작 관련 사이트 

상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누

상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누

저작권이 만료된 일러스트, 책, 명화 관련 고화질 이미지 사이트 Artvee

Artvee

 

html, css 관련 조언과 고양이에 대한 정보 공유는 언제나 환영입니다🧡

👇예비집사를 위한 웹사이트 관련 코드는 아래 깃허브에서 확인👇

Donghae0230/cat_butler