[반응형 홈페이지] xe 레이아웃 추천_simplestrap

안녕하세요! 우기블로그입니다.

 

오늘은 그동안 제작해온 xe 홈페이지에 대해서 리뷰해볼까 합니다. 오늘 소개해 드릴 레이아웃은 simplestrap이라는 xe 레이아웃입니다. 제로보드 xe로 홈페이지를 제작하다 보면 어떤 레이아웃을 쓰느냐에 따라 만족도가 틀려지는데요. 우선 제가 여러가지 레이아웃을 사용해 봤지만 심플스트렙 레이아웃처럼 고칠것이 거의 없이 그대로 적용할 수 있는 레이아웃은 없다고 느껴지네요.

 

 

 

 

 

그만큼 완성도가 높은 레이아웃이며,깔끔한 홈페이지를 쉽게 제작할 수 있는 유용한 레이아웃이라 생각이 듭니다. 그동안 적용해본 레이아웃들은 아래와 같습니다. 맨 처음에는 doorweb 레이아웃을 사용했는데, 요것도 나름 만족할 만큼의 메리트가 있는 레이아웃이었습니다. 그런데 적응하고 적용하려면 초보에게는 조금 난이도가 있는 레이아웃입니다. 그 다음으로 사용해본 레이아웃은 ASXE_FLAT 레이아웃입니다. 요것도 정말 깔끔하고 시원시원한 레이아웃인데, 살짝 아쉬운 부분이 있고, 최근에 나온 레이아웃이라 사용자층이 얇아 XE 게시판에 궁금한 부분을 물어봐도 아무도 대답 안해주더군요. ( ^^ 아쉬운 부분은 사이드바 부분을 뜯어 고치기가 너무 어렵다는 것이에요. )

 

 

 

 

 

심플스트랩 Simplestrap 레이아웃의 사용자 정의 부분입니다. 정말 초보자를 위해서 있어야 할 기능들을 다 넣어 주신것 같아요. 그래서 홈페이지 하나 만드는데 html이나 css 건드릴 필요없이 여기서 다 해결했어요. 편하죠. 그 전에 레이아웃들은 조금씩 html과 css를 만져주어서 억지로 몇가지 고치고 했거든요. 다만 무료버전에서는 라이센스를 제거하지 못한다는 단점이 있어요. 푸터영역에 Layout by Wincomi라는 글귀가 들어가는거를 삭제하려면 라이센스를 구입해야 한다고 해요.

 

 

사용자 정의에서 디자인 부분은 컬러셋과 둥근모서리와 그림자를 설정할 수 있습니다. 컬러셋은 빨강색, 노란색, 초록색, 파란색, 하늘색(기본)으로 제일 상단에 점보트론 부분의 색상과 사이드 부분의 메뉴 부분의 색상이에요. 점보트론은 상단에 보시면 빨강색으로 나와있고 게시판 제목이 크게 나오고, 쓰기, 게시판 검색, 설정 등등의 아이콘이 나와있는 부분을 말하는 거예요. 이 점보트론은 큰 박스를 일컫는 건데 큰 박스 안에 여러가지 옵션의 기능들이 나오고 사이트 게시판 정보를 나타내 주는 거라 하더군요.

 

 

 

 

그 다음 사용자 정의에서 형태에 보시면 왼쪽에 사이드바를 둘건지, 오른쪽에 사이드 바를 둘건지 결정할 수 있는 옵션이 있어요. ^^ 이 기능 정말 좋아요. 사실 사이드바는 경우에 따라서 왼쪽에 두고 싶을 때가 있고, 반대로 오른쪽에 두고 싶은 때가 있는데, 코드 수정없이 옵션을 걸어줄 수 있어서 정말 좋네요.

 

 

 

 

또한 상단바에 대한 옵션도 줄수 있는데, 상단바고정 기능과 상단바 색상기능이 있어요. 색상은 두가지만 있는데, 흰색과 검정색이에요. 상단바는 제일 위에 메뉴가 있는 부분을 말합니다. 검색바를 넣을 수 있고, 소셜로그인 기능도 넣을 수 있네요.

 

 

다음으로 사이드바 옵션입니다. 사이드바 너비를 바꿔줄수 있는데, 3:9 혹은 2:8로 만들수 있어요. 3:9는 사이드 바 넓이가 좀더 넓고, 컨텐츠 부분은 조금 좁아지는 옵션입니다. 처음에는 2:8로 설정이 되어 있는데, 2:8의 경우 사이드바의 폭이 너무 짧다는 느낌이 들어서 저는 3:9로 바꿔주었습니다. 또 최신글, 최신댓글 출력옵션이 있는데요. 이것 역시 너무도 반가운 기능입니다. ^^ 최신글 출력 위젯 쓸필요 없이 레이아웃 설치와 옵션 설정만으로 바로 나오게 할 수 있습니다. 또한 사용자 위젯도 설정할 수 있어서, 저는 여기에 애드센스 코드를 복사해서 넣어주었어요. 보통 사이드바에 광고를 많이들 넣으시는데, 이렇게 간편하게 넣을 수 있으니 심플스트랩 정말 편하네요. 저는 반응형 애드센스 코드를 넣었는데, 브라우저 크기에 따라 알아서 광고가 조절되게 만들었습니다. 사용자 지정 위젯은 3개를 넣을 수 있는데, 더 많은 위젯을 넣기를 원하시는 분은 커스텀/고급 탭에서 추가하실 수 있어요.

 

 

 

 

자, 이번에는 점보트론 설정 옵션입니다. 점보트론을 끌수도 있고, 켤수도 있는데요. 저는 사실 켜는게 좋더군요. 홈페이지 사용자들이 자신이 어느 게시판에 있는지 한눈에 알아보기도 쉽고, 게시판 관련기능, 게시글관리와 쓰기 등의 아이콘이 바로 떠 있어서 쉽게 사용할 수 있기 때문에 달아놓았습니다. 또 아래 옵션에 보시는것처럼 특정 게시판이나 페이지에서 점보트론을 숨길수도 있습니다. 모듈 ID를 입력하면 되거든요. 점보트론 글자 역시 왼쪽, 오른쪽, 가운데로 정렬할 수 있어요.

 

 

 

 

자아, 이렇게 옵션을 다 고쳐줘서 만들어낸 홈페이지가 아래와 같습니다. 아래 빨간부분이 점보트론이고요. 시원시원하게 대문짝만하게 나오죠? 그리고 아래 컨텐츠 부분의 게시판은 ASXE를 사용한 것입니다. 처음에는 스케치북게시판을 사용했는데, ASXE는 글자가 시원시원하게 나와서 이걸로 교체했습니다. 많은 게시판 옵션을 원하시면 sketchbook board가 좋고요. 간단한 기능을 사용하면서 가독성 좋은 게시판을 원하시면 ASXE가 좋습니다.

 

 

 

 

 

자, 다시 레이아웃 사용자 정의로 돌아가서, 푸터 옵션을 설정해 줄 수 있습니다. 카피라이트와 푸터메뉴와 푸터 하단에 html을 입력해 줄 수 있습니다. 저는 카피라이트 부분에 adsense코드를 넣었는데요. 잘작동하네요. 이것 역시 반응형 코드로 넣었습니다. 그래서 가로로 길게 나오네요.

 

 

 

 

사용자 정의 기타에서는 Font Awesome과 웹폰트를 설정해 줄 수 있습니다. 저는 나눔고딕으로 해놓았습니다.

 

 

 

 

 

 

 커스텀/고급 옵션에서는 다양한 기능들을 추가해서 사용할 수 있도록 옵션이 구비되어 있네요. 사실 이 부분은 하나도 사용 안해봤어요.

 

 

 

제 홈페이지는 대부분이 게시판으로 되어 있어서 심플스트렙을 적용시키기 위해서 게시판 관리에 들어가서 심플스트렙 레이아웃을 선택해주고, 적용시켰습니다. 또한 반응형 레이아웃이기 때문에 모바일에서도 심플스트렙을 보여주기 위해서 모바일뷰사용에 체크 표시를 없애고, 모바일 레이아웃은 미사용을 선택해주었습니다.

 

 

그래서 모바일에서 보여지는 화면은 다음과 같습니다. 먼저 점보트론이 나오고, 아래로 게시판이 나옵니다. (점보트론은 접기 기능도 있어요.) 따로 모바일용 레이아웃을 설치해 줄 필요없고, 광고크기와 사이트가 보기 편하게 나온다는 점이 반응형레이아웃의 가장 큰 장점이죠.

 

 

   

 

 

 

  

 

 

반응형 홈페이지 xe 레이아웃 simplestrap에 대해서 지금까지 소개했는데요. 간단하게 사이트를 제작할 수 있으면서 반응형 웹을 구성할 수 있고, 최근글과 댓글을 사이드바에 바로 적용시킬 수 있으며, 광고 달기에도 편하다는 점이 이 레이아웃의 장점이라고 정리할 수 있겠습니다.

 

그럼 저는 이만 물러가겠습니다. 즐거운 홈피제작 되십시요~!