들어가며


  여기서 레이아웃이란 사이트의 전반적인 구성과 배치를 말한다. ZB4에서 넘어온 사람 중에 레이아웃 개념을 이해하지 못하는 경우가 있다. XE는 ZB4에서 넘어오면서 CMS 즉, 한 사이트 내의 컨텐츠를 통합 관리하는 툴이 되었고 이는 다시 말하자면 사이트 빌더의 기능도 겸하게 된 것이다. 간단히 말하자면 사이트를 어떻게 디자인(미적 디자인+설계)할 것인가...를 다루는 것이 레이아웃 파트라 하겠다.




사이트 컨셉 잡기


  레이아웃을 구상하기 앞서 가장 먼저 생각해야 할 것은 사이트의 컨셉이다. 누가, 어떤 내용을, 어떻게, 누구에게 보여줄 것인지를 결정하는 것이 중요하다. 사이트의 컨셉이 명확하면 좀 더 편리하고 아름다운 레이아웃을 구성할 수 있지만, 그렇지 않다면 운영자는 불편하고 방문자도 이게 뭐하는 곳인지 모르는 상황에 처할 수 있다. 개인 홈페이지, 팬페이지, 커뮤니티, 포트폴리오 등 다양한 유형을 생각해볼 수 있다. 당연히 저 정도에서 끝내란 뜻은 아니다. 사이트의 컨셉을 정하는 것은 레이아웃 구성뿐만 아니라 사이트 운영의 동기를 확고히 하고 사이트를 보다 효율적으로 운영하는 데에 도움을 준다. 이 글에선 간단한 개인 홈페이지를 구축해보는 것을 전제로 하고 진행하도록 하겠다.




요소와 구조 정하기


  컨셉을 정했으면 구체적으로 사이트에 어떤 걸 넣고 싶은지를 생각해보자. 사이트의 뼈대도 생각해보자. 개인 홈페이지에 고려해볼 만한 요소는 다음과 같다.


1. 대문 화면(사이트에 접속하자마자 뜨는 화면)을 별도로 설정할 것인가?

2. 메뉴 구성을 어떻게 할 것인가?

3. 네비게이션(위/아래 혹은 이전글/다음글) 버튼을 만들 것인가?

4. 소개 텍스트를 넣을 것인가?

5. 모바일 화면을 별도로 제공할 것인가? 혹은 반응형으로 제공할 것인가?

6. 회원제/레벨제를 확대할 것인가?

7. 화면을 몇 단으로 구성할 것인가?

8. 화면 구성을 메뉴마다 다르게 할 것인가?




본격적인 디자인


  여기서는 본격적으로 사이트의 요소를 어떤 위치에 어떻게 배치할 것인지 구체적인 디자인 컨셉을 잡는다. 어떤 도구든 상관없다. 단순히 떠오르는 것을 메모해도 좋고 그래픽 프로그램을 꺼내도 좋다. 여기서는 간단한 1단 홈페이지를 구상해보겠다. 이 단계에서는 다음을 생각해보라.


1. 어떤 부분에 어떤 서체를 적용할 것인가?

2. 전체적인 미적 컨셉은?

3. 색상 배치는 어떻게 할 것인가?

4. 어떤 사진을 사용할 것인가?

  1. BlogIcon 서른 살의 봄 2017.02.10 21:18 신고  LINK EDIT/DELETE REPLY

    이번에 제로보드 4에서 업데이트 등의 한계를 느끼고 XE를 다시 공부하고 있는 중입니다 이나 님의 강좌가 정말 도움이 많이 될 것 같아요 ㅠㅠㅠㅠ 스킨도 완전 잘 만드시구,,,!!

티스토리 툴바