13.화면 디자인

🦮 스스로를 위한 프로젝트 일지 가이드

1️⃣ 프로젝트를 진행하며 '왜' 그렇게 했는가

2️⃣ 어떤 문제가 생겼고, 어떻게 해결하였는가

3️⃣ 프로젝트를 되짚어보며 개선할 점이 있는가

 

 

✅ 메인 화면

 

메인 화면 디자인은 팀원과 반씩 나눠서 했고 내가 튜닝한 부분은 위와 같다.

로고는 팀원이 찾아낸 '길벗'이라는 사이트에서 만들었다.

일단 내가 전체적인 홈페이지 틀과 슬라이드 쇼가 포함된 HTML 템플릿을 구글링하여 가져와 위 사진처럼 튜닝했고, 팀원은 틀 중에서 다른 부분을 마저 튜닝했다.

로그인 폼은 내가 따로 구글링해서 가져와 튜닝했다.

아이콘 메뉴 같은 경우 아이콘 사이트에서 가져왔고,

하단 배너의 경우 이미지를 하나씩 구해 버튼에 반영해 만들었다.

 

 

1️⃣ 프로젝트를 진행하며 '왜' 그렇게 했는가

 

홈페이지 구성과 디자인을 A부터 Z까지 다 하기엔 시간도 너무 오래 걸리고 프론트보다는 기능에 시간을 투자하고자 했다.

 

2️⃣ 어떤 문제가 생겼고, 어떻게 해결하였는가

 

구글링해서 가져온 로그인 폼의 기본 버튼 색은 저 주황색이었고, HTML 템플릿에서 네브바 디자인 색은 원래 검은색이었다.

그런데 로그인 폼에 아무리 css로 스타일을 먹여도 왜인지 버튼 색이 변하지 않았고...

반대로 네브바 css에 아무리 스타일을 먹여도 검은색에서 변하지 않는 문제가 발생했다...

그래서 생각한 방법은 어느 한쪽에 색이 맞춰진 걸 다시 갖고 오자는 거였다.

로그인 폼은 다시 찾아보자니 저렇게 심플하면서도 괜찮은 디자인이 없어서 포기하고,

HTML 템플릿을 다시 찾아보니 마침 딱 똑같은 주황색 네브바를 가진 템플릿이 있었다.

거기서 네브바 코드만 긁어와서 디자인 통일성은 해결했다.

 

3️⃣ 프로젝트를 되짚어보며 개선할 점이 있는가

 

웹페이지를 반응형으로 만들면 좋을 것 같다.

 

✅ 회원가입

 

회원가입 메뉴 로고는 마찬가지로 길벗 사이트에서 만들었고,

회원가입 입력 폼과 버튼은 부트스트랩에서 가져와 튜닝했다.

 

 

2️⃣ 어떤 문제가 생겼고, 어떻게 해결하였는가

 

왜인지 모르게 입력 폼이 네브바와 배너 사이에 딱 안오고 배너 밑으로 삐져나와버리는 문제가 발생했다.

div 위치를 요리조리 조정해봐도 안돼서 결국 폼과 배너 사이에 <br>을 엄청 먹여 해결했다..

 

 

✅ 수강 후기

 

 

 

 

 

테이블, 버튼, 입력 폼 모두 부트스트랩에서 가져와 튜닝했다.