나만의 첫 웹사이트를 만들어 보자!
HTML도 배우고 있고 CSS도 배우고 있고 하지만 한낱 지식들에 불과하다. 아직도 알아야 할 것들이 많고 갈 길이 멀지만 지식만 쌓아갈 순 없다. 직접 만들어 봐야한다. 직접 코드를 작성하고, 디자인을 구상하며 코드를 써봐야 지식에 불과했던 낱개의 태그들이 나만의 것으로 하나로 만들어질 수 있다.
그래서 오늘 초대한 선생님은 Dana Donato라는 이탈리아 분이시다. 워드 프레스 기반의 웹사이트를 제작하는 프리랜서 디자이너라고 한다.
어제 들었던 강의는 코드를 직접 바로바로 작성해서 웹 페이지에 구현되는 작업에 중심을 둔 강의였다. 더 추가적인 정보가 필요하다면 아래의 링크를 참고!
https://dowhateveryouwant1661.tistory.com/19
웹사이트를 만들어 보고 싶은데, 위의 정보만 가지고는 사실 뭔가 부족했다. 구체적으로 어떤 순서를 통해서 어떤 아이디어를 가지고 웹사이트를 만들어야 하는지에 대한 아이디어가 필요했다. 그리고 지금 내가 더 필요한 것은 워드 프레스를 가지고 직접 웹사이트를 구현해야 하는 것이었기에, 코드에 대한 지식보다 전체적인 과정에 대한 정보가 필요했다.
수업 목록은
웹사이트의 각 구성요소에 맞게 필요한 요소들을 차례대로 짚어가며 설명하고 있다. 강사의 얼굴없이 목소리로만 화면의 설명 및 작동 과정을 통해서 설명하고 있다.
수업 노트를 공유해보면
웹 페이지와 웹 사이트의 차이점은?
- 웹 페이지는 한 장, 웹 사이트는 웹 페이지의 묶음(collection)이다.
웹 페이지 섹션은 어떻게 나뉠까?
- 메뉴
: 웹 페이지의 목록 영역, 상단에 가로로 놓여진 카테고리
- 헤더(header)
: 로고를 넣었다면, 로고 포함한 메뉴 전체의 가로 영역
- 꼬리말(footer)
: 웹 페이지의 가장 하단 부분, 기술적 정보나 연락처 등을 포함하는 부분
- 주요 이미지(hero image)
: 웹 사이트의 주제를 드러내는 이미지
- 사이드바(lateral sidebar)
: 측면에 놓이는 긴 형태로 놓이는 정보
- 바디(body)
: 웹 페이지에서 가장 큰 영역
웹사이트의 내용들은 무엇이 있을까?
1. 그림(picture)
: .jpg 확장자를 주로 지니며, 카메라로 찍은 것들
2. 일러스트(illustrations)
: 그래픽 툴을 이용해서 그린 이미지, 아이콘 등이 해당
3. 배경(backgrounds)
: 중요한 것 뒤에 있는 이미지
4. 패턴(patterns)
: 반복된 그림 형태, 중요한 것 뒤에 놓이는 이미지
5. 제목과 문단(titles and paragraphs)
: 제목을 달고 그 아래 더 세부적으로 텍스트를 서술한 게 문단
6. CTA(call to actions)
: 'call me for more information', 'send me a message', 'take a look at my portfolio', 'subscribe to my newsletter' 이런 식으로 사용자에게 직접 행동을 취할 수 있도록 요청하는 메세지를 남기는 것이다. 가장 흔히 "좋아요~ 구독~ 꾸욱~" 뭐 이런거.
7. 버튼(buttons)
: 사람들이 행동을 취할 수 있는 클릭 가능한 그래픽
8. 연락처 형식(contact forms)
: 이름, 이메일, 메세지 등을 남길 수 있는 영역
9. 뉴스레터 형식(newsletter forms)
: 뉴스레터 신청 영역
10. 검색(search bars)
: 검색할 수 있는 영역
웹사이트 디자인하는 방법은?
기본적으로 마인드맵 방식이라고 생각하면 되는데 주 메뉴와 각각의 하위 메뉴를 구상한다.
1. 직접 그리기
: 펜을 들고 종이에 직접
2. 포스트잇을 활용하기
: 한 장의 포스트잇 마다 메뉴 이름을 적고 각각의 아래 부분에 또 다른 세부 목록 이름을 적어 붙였다 떼면서 구상한다.
3. 엑셀이나 구글시트 활용하기
: 각 열별로 메인 메뉴와 하부 메뉴를 구상한다.
위의 세 가지 방법 중에서 한 가지만 사용해도 되고, 다 사용해도 된다.
만족스러운 결과가 나올 때 까지 계속 구상, 구성해본다.
요약하면
내가 누구인지(내가 소개하고 싶은 제품/서비스가 무엇인지)
말하고 싶은 것, 보여주고 싶은 것이 무엇인지
메뉴 구성 디자인하기
내용 정의하기
'디지털 노마드를 꿈꾸며 > 실전연습' 카테고리의 다른 글
서브라임 텍스트로 만든 첫 웹페이지3 (수월-) (0) | 2020.04.07 |
---|---|
서브라임 텍스트로 만든 첫 웹페이지2 (지끈-) (0) | 2020.04.06 |
서브라임 텍스트로 만든 첫 웹페이지1 (뿌듯-) (0) | 2020.04.05 |
SKILLSHARE:첫 웹사이트를 만들고 싶은 사람들에게2 (0) | 2020.03.25 |
SKILLSHARE:HTML+CSS베이직 및 유용한 웹사이트 (0) | 2020.03.24 |
댓글