Semplice로 웹사이트 제작하기(1)
Semplice를 선택하는 이유, 세팅 방법, Grid 설정하기
이 글을 시작하며.
이 글을 시작으로, "Semplice를 활용한 웹사이트 제작하기" 글을 시리즈로 쓰고자 합니다.
이 글은 국내에서 Semplice를 활용하여 포트폴리오 웹사이트를 만들고자 하는 디자이너 또는 웹사이트를 만들고자 하는 사람들에게 조금이나마 도움이 되고자, 그리고 저의 경험을 기록하고자 쓰게 되었습니다.
처음 친구(UXUI 디자이너)의 소개로 Semplice를 접하고,
국내 설명 글을 찾아보았지만 친절한 한국어 설명 글이 많이 없다는 사실에 한 번 슬퍼하고..
Semplice에 관련된 한국어 설명 글이 있어도 처음 시작 단계만 주로 있음에 두 번 슬퍼하고..
이후 영어로 설명된 Semplice 사이트를 번역하고 적용해보고 시행착오를 겪으며..
세 번째 슬픔에 다다랐을 때.. 브런치에 이 글을 시리즈로 써 보고자 결심했습니다:)
0. Semplice 왜 선택했으며, 어떻게 시작해야 될까?
제가 Semplice를 선택하게 된 계기는 글 머리에서도 언급했듯이 친구의 추천을 받아 선택하게 되었는데, 좀 더 자세히 말하자면 그 친구의 '왜 Semplice를 선택해야 하는지에 대한 언변에 설득당했다'는 것이 더욱 정확한 표현인 듯합니다:)
그렇기 때문에 아래 링크의 글을 읽어보고 Semplice를 선택할지에 대해 고민해보고, 설득당했다면 글의 맥락에 따라 구매 및 시작 세팅으로 이어지면 될 듯합니다.
-> 이 링크는 제이님의 브런치 글로, Semplice의 장단점과 기본 세팅 방법(Semplice 구매 및 호스팅)에 대한 설명을 자세히 알아볼 수 있습니다.
참고로 Semplice에는 'Single, Studio, Business' 3가지 버전이 있는데, 저는 Studio를 구매해서 사용 중입니다. 처음에 Single로 구매했지만 이것저것 시행착오를 겪으면서 너무 답답한 나머지 돈으로 해결 보려는 마음에 Studio를 결제했죠... 하지만 역시 돈으로 해결되는 문제는 아니었고 열심히 번역하고 시행착오를 겪어서 해결해야 되는 문제였습니다 휴.
1. Semplice 구매 후, 우선 큰 틀과 기능을 알아보자!
우리는 이제 Semplice를 구매해서 워드프로세서에 설치까지 완료하고 실행을 했습니다. 그렇다면 처음 알아야 될 내용은 무엇일까요? 바로 크게 짜인 구조와 기능을 알아보는 것입니다.
Semplice는 크게 "Pages, Projects, Customize, Settings" 4가지 카테고리로 나뉩니다. 특히, Pages와 Projects의 의미/기능을 구분하는 것이 중요하다고 볼 수 있습니다.
->이 링크는 제이님의 브런치 글로, Semplice의 4가지 구조와 기능을 잘 설명하고 있으니 한번 읽어보시고 큰 틀을 이해한 후, 제 글에서의 디테일한 기능 설명을 통해 익혀가는 것을 권장합니다.
2. 이제 본격적으로 웹사이트를 만들어보자!
구매하고 세팅하고 큰 구조까지 파악했으니! 드디어 본격적으로 웹사이트를 만들어 봅시다. 제가 이 글에서, 그리고 앞으로의 시리즈에서 다루고 싶은 본 내용은 이제부터 시작이랍니다:)
하지만, 여기 목차 2번으로 넘어오는 데 까지 많이 힘들었을 거예요. (특히, 호스팅을 구매하고 연결하는데 힘들었을 것이라 예측됩니다.. 왜냐? 전 그 과정이 제일 힘들고 복잡했거든요 휴) 그렇기 때문에, 오늘 글에서는 세팅을 하고 시작을 했다는 것에 의의를 두고, 간단한 기능을 알려드리고 글을 마치고자 합니다:)
[그리드(Grid) 세팅하기]
Semplice로 처음 들어가면 상단에 Customize 항목이 보입니다.
Customize에 들어가면, Grid를 포함한 여러 탭이 있는데 그중 오늘은 Grid 설정하는 법을 알려드리겠습니다.
Semplice의 'Custiomize > Grid' 화면Grid는 위 화면의 Options 창에서 설정 값 변경을 통해 결정됩니다.
이 Grid 값은 모든 pages, projects 등에 적용됩니다.
Semplice는 반응형까지 모두 만들 수 있으나, 우선 PC 웹 버전 제작을 중점으로 둘 것이기 때문에, Options 창에서의 "Grid> width"와 "Gutter Width> Desktop" 값을 중심으로 변경하면 됩니다.
Grid> width는 내가 제작한 콘텐츠가 실질적으로 들어갈 너비 값을 의미하며, Gutter Width> Desktop은 PC 웹에서의 거터 값입니다. 일반적으로 시중에 나온 모니터 해상도를 고려했을 때, 너비 값을 1280보다 작게 설정해야 합니다. 최대 값이 1280인 것이죠.
하지만, 저는 위의 이미지와 같이 1920 값을 설정했습니다. 왜냐하면 메인 페이지에서 풀화면으로 영상을 채우고 싶은데, 그리드 값을 1280 이하로 설정해버리면 좌우 여백이 자동으로 생기기 때문입니다.
물론 html, css를 활용한 실질적인 웹 개발에서는 모든 웹 페이지에 적용되는 그리드 값을 기본으로 설정하고 메인 페이지만 풀 화면으로 채울 수 있는 명령어가 있지만.. Semplice에서는 아직 그런 기능을 찾지 못했습니다 ㅠㅠ 혹시 방법을 알고 계시는 분은 댓글 언제나 환영입니다:)
무튼 저는 메인 페이지 영상이 풀로 채워지는 것을 원하기 때문에, 기본 너비 값을 1920으로 하고 그 외의 모든 페이지는 너비 1200 값을 기본으로 좌우 간격(마진 값)을 주어 여백을 만드는 수고로운 방법을 선택했답니다..
거터 값은 이미지를 배치해보면서 수정해 나가면 됩니다! 보통 20-30을 기본 거터 값으로 설정해놓고 이미지를 배치하면서 적절한 값을 찾아나가면 수월합니다:)
다음 글은 웹사이트 제작 시 제일 많이 사용되는 "글자 또는 이미지를 어떻게 사용자가 원하는 위치에 배치할 수 있는지"에 대한 방법을 알려드리겠습니다. 저는 이 방법을 익히는 동안 많은 시행착오가 있었기 때문에, 분명 도움될 것이라고 생각합니다:)
P.S. Semplice를 활용한 웹사이트 결과물을 더 보고 싶다면, 아래의 링크를 통해 모아 볼 수 있습니다.
