본문 바로가기
디지털 노마드를 꿈꾸며/실전연습

SKILLSHARE:첫 웹사이트를 만들고 싶은 사람들에게

by 오일러33 2020. 3. 25.

나만의 첫 웹사이트를 만들어 보자!

HTML도 배우고 있고 CSS도 배우고 있고 하지만 한낱 지식들에 불과하다. 아직도 알아야 할 것들이 많고 갈 길이 멀지만 지식만 쌓아갈 순 없다. 직접 만들어 봐야한다. 직접 코드를 작성하고, 디자인을 구상하며 코드를 써봐야 지식에 불과했던 낱개의 태그들이 나만의 것으로 하나로 만들어질 수 있다.

 

그래서 오늘 초대한 선생님은 Dana Donato라는 이탈리아 분이시다. 워드 프레스 기반의 웹사이트를 제작하는 프리랜서 디자이너라고 한다. 

 

SKILLSHARE.COM

 

어제 들었던 강의는 코드를 직접 바로바로 작성해서 웹 페이지에 구현되는 작업에 중심을 둔 강의였다. 더 추가적인 정보가 필요하다면 아래의 링크를 참고!

 

https://dowhateveryouwant1661.tistory.com/19

 

SKILLSHARE:HTML+CSS베이직 및 유용한 웹사이트

나만의 홈페이지 만들기 및 유용한 웹사이트를 소개해 보고자 한다. 개성있어 보이는 위 강사는 Rich Armstrong(리치 암스트롱)이고 TapTapKaboom(탭탭카붐)의 설립자라고 한다. https://taptapkaboom.com/ TapTa..

dowhateveryouwant1661.tistory.com

 

웹사이트를 만들어 보고 싶은데, 위의 정보만 가지고는 사실 뭔가 부족했다. 구체적으로 어떤 순서를 통해서 어떤 아이디어를 가지고 웹사이트를 만들어야 하는지에 대한 아이디어가 필요했다. 그리고 지금 내가 더 필요한 것은 워드 프레스를 가지고 직접 웹사이트를 구현해야 하는 것이었기에, 코드에 대한 지식보다 전체적인 과정에 대한 정보가 필요했다.

 

수업 목록은

웹사이트의 각 구성요소에 맞게 필요한 요소들을 차례대로 짚어가며 설명하고 있다. 강사의 얼굴없이 목소리로만 화면의 설명 및 작동 과정을 통해서 설명하고 있다.

 

 

수업 노트를 공유해보면

 

웹 페이지와 웹 사이트의 차이점은?

- 웹 페이지는 한 장, 웹 사이트는 웹 페이지의 묶음(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. 엑셀이나 구글시트 활용하기

 :  각 열별로 메인 메뉴와 하부 메뉴를 구상한다.

 

위의 세 가지 방법 중에서 한 가지만 사용해도 되고, 다 사용해도 된다. 

만족스러운 결과가 나올 때 까지 계속 구상, 구성해본다.

 

 

 

 

요약하면

내가 누구인지(내가 소개하고 싶은 제품/서비스가 무엇인지)

말하고 싶은 것, 보여주고 싶은 것이 무엇인지

메뉴 구성 디자인하기

내용 정의하기

 

 

 

댓글