by
Jan 17. 2021
Semplice로 포트폴리오 웹사이트 제작하기 (2)
대표 기능들 알아보기
이 글은 Semplice를 활용한 디자인 포트폴리오 웹사이트 제작 과정을 공유하는 글입니다. 직접 Semplice를 활용해 포트폴리오 웹사이트를 제작하는 과정에서 알게 된 유용한 정보들을 공유합니다. Semplice가 가지고 있는 특징이 무엇인지 궁금하시다면 이전 글을 봐주시기 바랍니다.
1. Semplice의 대표 기능 4가지
(1) Pages
Pages는 웹사이트를 구성하는 카테고리들을 만드는 기능입니다. 웹사이트 내비게이션 바에 메뉴 버튼으로 적히는 페이지들을 구성하는 것입니다. 예를 들자면, 메인 페이지, 회사 소개 페이지, 연락 안내 페이지, 문의 게시판 등을 들 수 있습니다.
(2) Projects
Projects는 웹사이트의 포트폴리오 포스팅 페이지를 만드는 기능입니다. 일종의 블로그 포스팅 페이지와 유사하다고 생각해주시면 됩니다. 그렇기 때문에 Project에서 만든 화면들은 자동으로 리스트로 구성되어 웹사이트에서 해당 페이지들을 목차로 볼 수 있게 도와줍니다.
(3) Customize
Customize는 웹사이트에 공통으로 적용될 디자인 요소들을 설정하는 기능입니다. 웹사이트를 디자인할 때는 색상, 폰트 종류, 폰트 사이즈 등을 통일해서 디자인하는 경우가 많기 때문에 이를 좀 더 수월하게 도와주는 다양한 설정 기능을 제공합니다.
(4) Settings
Settings은 웹사이트의 이름, 파비콘(Favicon)등의 기본 웹 요소들을 세팅하는 기능입니다.
2. Pages와 Projects의 공통점과 차이점
(1) 공통점 : 제작 방식이 같다.
Semplice의 Pages와 Projects의 첫 제작 화면Pages와 Projects는 제작 방식이 같다는 특징이 있습니다. 좌측 상단에 아이콘을 드래그로 화면에 배치하는 방법으로 웹사이트 화면을 구성합니다. 문자, 사진, 영상 등을 원하는 위치에 배치할 수 있을 뿐만 아니라, Semplice가 제공하는 기본 모듈에서는 공유 버튼, SNS 링크, Dribbble 연동을 위한 버튼들도 추가할 수 있습니다.
디자인을 완료한 상태의 제작 화면. (항상 오른쪽처럼 설정창이 떠있어서 바로바로 값을 수정할 수 있다.)
박스로 구성하는 레이아웃 구조를 가진 Semplice화면을 구성하는 방식은 박스(편의를 위해 박스라고 지칭)로 영역을 구분하는 것입니다. 웹코딩에서 처음에 UI를 구축하고 그다음 본격적으로 구성요소들을 만드는 것과 같은 방식입니다. 저는 메인 포트폴리오 화면을 구성하기 위해 큰 단락이 되는 박스 안에 제목과 내용을 구분하는 박스를 만들고, 그 안을 텍스트 박스들로 구성하였습니다. 위의 이미지처럼 사진, 영상, 글 모두 박스 영역 안에서 위치와 규격을 값(숫자)으로 설정해야 하기 때문에 이전 글에서 언급했듯이 px(혹은 dp)를 고려한 사전 디자인 설계가 중요합니다.
다만, 박스로 구성되는 탓에 박스와 박스 중간에 걸쳐진 콘텐츠를 넣는 건 어렵다는 단점이 있습니다. 때문에 이 점을 고려하여 포트폴리오의 구성 방식을 설계해야 합니다. 저도 좌측에 사용자의 스크롤 정도에 따라 움직이는 포트폴리오 타이틀 문구를 넣고 싶었는데, UI가 박스 형태로 고정되어있어 스크롤 첫 화면부터 마지막 화면까지 유동적으로 움직이는 요소는 만들 수 없어서 일단 보류해둔 상태입니다. (이 부분은 추후에 코딩을 통해 수정 가능한지 알아볼 생각입니다.)
(2) 차이점 : 완성된 결과물이 다르다.
Pages와 Projects는 제작 과정에서는 큰 차이를 느끼지 못합니다. 만드는 과정이 같기 때문입니다. 그러나 이 둘의 결과물은 실제 웹사이트를 보았을 때 크게 차이가 납니다. 그렇기 때문에 Semplice를 사용하면서 "어? 둘이 비슷한 거 아니야? 뭐가 다르다는 거지?"라고 생각하며 Pages와 Projects의 구분을 명확하게 하지 않고 웹사이트를 제작하면 최악의 경우 다시 만들어야 하는 번거로움이 생길 수 있습니다. 때문에 Pages와 Projects의 차이를 좀 더 자세히 설명해드리고자 합니다.
[1] Pages는 이런 게 다릅니다.
Pages에서 만드는 화면들은 실제 웹사이트에서 모두 네비게이션 바에 버튼으로 위치하는 페이지입니다. 물론 제작 과정에서 원치 않은 화면들은 실제 웹사이트에 반영되지 않게 설정할 수 있지만, 기본적으로 대부분의 Pages의 화면들은 상단 메뉴바로 구성됩니다. 또한, 메인 페이지 역시 Pages에서 함께 제작해야 합니다.
때문에 저 역시 웹사이트의 메인 페이지(Main Landing page-Front Page)와 네비게이션 바 버튼 페이지들인 About, Resume, Work 페이지를 'Pages'에서 만들었습니다. 아래의 이미지는 Pages의 제작 리스트 화면과 실제 제 웹사이트에서 이들이 어떻게 보이는지 안내하는 이미지입니다.
Pages에서 만든 페이지 하나하나는 전부 아래의 웹사이트 상단 메뉴바로 구성된다.[2] Projects는 이런 게 다릅니다.
Projects는 실제 웹사이트에서 화면 하단에 자동으로 '이전 버튼'과 '다음 버튼'이 활성화됩니다. 해당 버튼에 대한 설정은 [ 3. Semplice 활용의 끝, Customize ]에서 좀 더 상세하게 설명하겠습니다. 이처럼 Projects는 만들어진 화면들끼리 자동으로 목차 구성이 되어 각각의 페이지들이 연결된다는 특징이 있습니다. 때문에 디자이너의 포트폴리오 작업물을 소개하는 페이지를 제작할 때 유용합니다. 웹사이트 방문자가 쉽게 '다음'이나 '이전' 버튼을 눌러서 다른 포트폴리오 페이지로 이동할 수 있도록 세팅해주기 때문입니다.
각각의 페이지는 한 가지 포트폴리오 작업물을 소개하는 페이지로 구성합니다.
Projects에서 다음이나 이전 포트폴리오 페이지를 볼 수 있도록 만들지 않더라도 자동으로 버튼을 생성해줍니다.3. Semplice 활용의 끝, Customize
Customize는 앞서 설명드렸다시피 웹사이트에 공통적으로 적용되는 디자인 요소들을 설정하는 기능입니다. 때문에 이를 잘 설계한다면 웹사이트 제작 시간을 크게 단축할 수 있을 뿐만 아니라, 보다 효과적으로 웹사이트를 제작할 수 있습니다.
Customize는 총 10가지 카테고리로 구성됩니다. 이 10가지 카테고리를 전부 설명하는 건 불필요하다고 판단해 제가 생각했을 때 중요하다고 느낀 기능들만 소개하겠습니다. 소개되지 않은 기능들은 실제로 한 번 이용해보시면 바로 기능을 파악할 수 있을 정도로 이해하기 쉬운 기능들이니, 너무 걱정하지 않으셔도 됩니다.
(1) Grid
Grid는 웹사이트의 그리드 값을 설정하는 기능으로 칼럼(Calume)수와 가터(Gutter) 값으로 웹사이트의 그리드를 구성할 수 있습니다. 지정하는 값에 따라 웹사이트의 그리드가 어떻게 적용되는지 바로 확인할 수 있기 때문에 일일이 확인해가며 값을 입력하지 않아도 된다는 장점이 있습니다.
(2) Navigations
Navigations는 [2. Pages와 Projects의 공통점과 차이점]에서 언급하였듯이, 웹사이트 메인 페이지에 보이는 내비게이션 바를 설정하는 기능입니다. Semplice는 기본적으로 반응형으로 사이트를 제작할 수 있도록 도와주기 때문에 모바일 화면과 웹사이트 화면에서 보이는 상단 메뉴바를 다르게 설정할 수 있다는 장점이 있습니다.
(3) Thumb hover
Thumb hover는 포트폴리오 썸네일에 방문자가 마우스 호버를 하게 될 때 보여줄 효과를 설정하는 기능입니다. 많은 사이트들이 마우스 호버 효과를 통해 자신의 작업물을 좀 더 적극적으로 어필합니다. 또한, 방문자 역시도 단순히 작업물들의 이미지가 나열되어 있는 것보다는 호버 효과로 숨어있던 정보를 확인하거나 인상 깊은 인터랙션을 통해 재미를 느낄 수 있습니다.
(4) Transitions
Transitions는 웹사이트 페이지 간의 이동 시 적용될 인터랙션을 설정하는 기능입니다. 한 마디로 다음 화면으로 넘어갈 때 '어떻게' 넘어가게 할 것인가를 결정하는 중요한 기능이라고 말할 수 있습니다. 저는 가장 기본 효과인 Fade로 설정을 해두었지만, 그 외에도 왼쪽에서 밀리듯이 바뀌거나, 위에서 아래로 내려오는 것처럼 바뀌는 등의 다양한 페이지 이동 효과를 설정할 수 있습니다.
(5) Project Nav
Project Nav 역시 [2. Pages와 Projects의 공통점과 차이점]에서 언급하였듯이, Projects의 특징인 페이지별 연결성을 보여주는 버튼과 리스트를 설정하는 기능입니다. 이전 버튼과 다음 버튼의 구성뿐만 아니라, 포트폴리오 페이지들이 무엇이 있는지 리스트를 만들어 보여줄 수 도 있습니다.
4. 작은 디테일을 가진 Settings
Site Title과 Tagline은 웹사이트의 이름을 짓는 중요한 기능입니다. 위의 이미지처럼 컴퓨터에서 웹사이트를 확인할 때 인터넷 브라우저 상단의 탭에 표시되는 이름과 웹사이트를 링크로 공유할 때 보이는 이름을 결정하기 때문입니다. 저는 Title로 제 이름을 작성해 누구의 포트폴리오 사이트인지를 명확히 하고, Tagline에서는 저의 정체성과 직업을 설명하는 UX Designer라고 작성했습니다.
