by
Jan 05. 2021
Semplice로 포트폴리오 웹사이트 제작하기 (1)
Semplice를 시작하기 전에 기본 세팅하기
이 글은 Semplice를 활용한 디자인 포트폴리오 웹사이트 제작 과정을 공유하는 글입니다. 직접 Semplice를 활용해 포트폴리오 웹사이트를 제작하는 과정에서 알게 된 유용한 정보들을 공유합니다.
1. 왜 나는 Semplice를 선택했는가
'나도 Semplice를 써서 포트폴리오 웹사이트를 만들어야 하나? Semplice 쓰면 뭐가 좋지?'라는 질문에 대해 도움이 될 수 있도록 일단 제가 Semplice를 선택한 이유를 말씀드려야 할 것 같습니다. 저는 HTML과 CSS를 공부를 시작한 지 얼마 되지 않아 혼자서 웹사이트를 제작하기엔 어려움이 있었습니다. 만약 HTML과 CSS를 이용해 웹사이트를 만든다면 몇 개월을 투자해도 완성하기 어려울 정도로 기초적인 수준입니다.
다른 사람들처럼 웹 제작을 도와주는 사이트를 이용할 수도 있었지만, 정기적으로 돈을 내야 할 뿐만 아니라 지정한 탬플릿만 이용해야하기 때문에 '디자인 자유도'가 낮다는 문제가 있었습니다. 포트폴리오란 곧 저를 대변해주는 존재라고 생각했기 때문에 '디자인의 자유도'는 포기할 수 없는 중요한 요소였습니다.
'시간'과 '디자인 자유도'라는 두 마리 토끼를 잡기 위해 여러 웹사이트 제작 방법을 검색하다 보니 Semplice가 디자인 자유도도 높으며 어려운 코딩 지식이 없어도 쉽고 빠르게 원하는 결과물을 제작할 수 있다고 판단하였습니다. 다른 웹 제작 사이트와 Semplice를 비교한 내용은 아래의 링크를 통해 더 자세히 확인해보실 수 있습니다. (저도 아래의 임유진 님의 글을 참고해 결정했습니다.)
2. 내가 생각하는 Semplice의 장단점
제가 직접 Semplice를 사용하면서 느꼈던 장단점을 설명드리겠습니다. 실제로 사용해보니 '모든' 디자이너들에게 적합한 프로그램은 아니었기 때문에 장단점을 보시고 자신에게 적합한지 판단해보시면 좋을 것 같습니다. (실제로 잘 모르고 Semplice를 사용해 낭패를 본 분들의 이야기도 있습니다.)
(1) Semplice의 장점
- 99＄(기본 버전)를 '1번'만 지불하면 평생 사용할 수 있다.
- 코딩을 잘 몰라도 어느 정도 원하는 결과물을 제작할 수 있다.
- HTML/CSS/Javascript 지식 없이도 기초적인 인터랙션 효과를 줄 수 있다.
- HTML/CSS/Javascript 지식이 있다면 활용도가 더 높아진다. (공부하면 결과물을 더 발전시킬 수 있는 기회가 생긴다.)
- 구글 애널리틱스를 이용할 수 있도록 지원해준다.
- 반응형으로 제작 환경을 지원하기 때문에 웹 버전과 모바일 버전을 한 번에 제작할 수 있다.
(2) Semplice의 단점
- 호스팅/도메인을 구입해야 하기 때문에 '유료' 호스팅/도메인은 정기적인 지출이 생긴다.
- 결국 HTML/CSS/Javascript를 모르면 원하는 결과물을 '완벽하게' 구현하기 어려울 수 있다.
- 자유도가 높아 탬플릿이 없어 일반 웹사이트 제작 사이트를 활용하는 것보다 시간이 2~3배 이상 소요된다.
3. Semplice를 사용하기 위해 해야 할 기본 세팅 5가지
(1) Semplice 결제하기
개인이 제작할 웹사이트라면 'Single'과 'Studio' 중에 하나를 구매해야 합니다. 저는 'Single'만으로도 충분히 제가 원하는 결과물을 제작할 수 있다고 판단하여 99＄를 주고 'Single'을 구매하였습니다. 추후에 원한다면 언제든지 'Studio'로 업그레이드할 수 있기 때문에 일단 Semplice를 처음 이용하신다면 'Single' 구매를 추천드립니다. 앞서 말씀드린 것처럼 Semplice는 1번만 결제하면 추가 지출 없이 평생 사용할 수 있다는 장점이 있습니다.
결제를 완료하면 가입한 이메일로 '라이선스 키'를 받을 수 있습니다. 이 '라이선스 키'는 이후의 (4) 워드프레스에 Semplice를 추가하기에서 어떻게 활용하는지 설명드리겠습니다. 아래의 링크를 통해 Semplice가 제공하는 3가지 버전의 스펙들을 좀 더 자세히 확인해볼 수 있습니다.
(2) 호스팅/도메인 구매하기
저는 처음부터 '유료' 호스팅/도메인을 구매하는 것은 추천하지 않습니다. 말씀드린 것처럼 Semplice는 다른 타 웹 제작 사이트보다 훨씬 더 많은 시간과 노력을 들여야 하기 때문에 중도에 포기하거나 다른 일이 바빠서 미루는 일이 생길 수도 있습니다. 저도 생각보다 제작 시간이 많이 소요돼서 계획했던 기간보다 더 많은 시간을 투자하고 있습니다.
만약 해당 기간 동안 '유료' 호스팅/도메인을 구매했다면 웹사이트를 원하는 만큼 활용하지 못한 체 정기적으로 불필요한 돈이 지출될 수 있기 때문에 일단 처음에는 '무료' 호스팅/도메인을 사용하고 웹사이트 제작이 완성된 다음에 '무료' 호스팅/도메인에 한계를 느낀다면 그때 유료로 전환하는 것을 추천드립니다. 물론 '무료' 호스팅/도메인은 그만큼 한계점들도 많기 때문에 유료와 무료의 장단점을 파악해 원하는 호스팅/도메인 유형을 선택하시는 게 제일 좋은 방법입니다.
호스팅 사이트를 이용할 때 주의해야 할 점은 '호스팅이 워드프레스를 지원하는가'를 확인하는 것입니다. 간혹 실수로 워드프레스를 지원하지 않은 호스팅을 사용할 경우, 사용자가 직접 연결을 하거나 최악의 경우 재구매를 해야 하는 번거로움이 있기 때문에 주의해야 합니다. 아래는 워드프레스 호스팅을 제공하는 사이트 일부를 정리한 목록입니다.
01. 해외 호스팅 사이트
- Bluehost
- Dreamhost
- SiteGround
- Flywheel
02. 국내 호스팅 사이트
- Dothome
- Cafe24
- Gabia
저는 문제가 생겼을 때 문의하기 편하도록 한국 호스팅 사이트(닷홈)가 제공하는 '무료' 호스팅/도메인을 이용하고 있습니다. Semplice는 공식적으로 Flywheel을 추천하고 있지만 필수는 아니기 때문에 다양한 호스팅 사이트들의 장단점을 찾아보고 자신에게 맞는 호스팅 사이트로 결정하는 것을 추천드립니다. 아래의 링크는 워드프레스에서 제공하는 국내 무료 호스팅 사용 방법에 관한 글입니다.
(3) 워드프레스 설치하기
워드프레스를 설치하는 방법은 간단합니다. 워드프레스 사이트에 접속해 회원가입 후 워드프레스 파일을 다운로드하면 됩니다. 다만 여기서 주의할 점은 Wordpress.org와 Wordpress.com을 혼동해서 잘못 설치하는 것입니다. Semplice는 공식적으로 Wordpress.org 설치를 권장합니다. Wordpress.org는 아래의 링크에서 무료로 다운로드할 수 있습니다.
(4) 워드프레스에 Semplice 설치하기
워드프레스에 Semplice를 설치하기 위해선 메일로 받은 '라이선스 키'와 'zip 파일'이 필요합니다. 다운로드한 'zip 파일'을 압축 해제하면 두 번째 zip 파일이 나오는 데, 이 두 번째 zip 파일을 이용해야 합니다. 만약 압축해제를 하지 않고 다운로드한 대로 zip 파일을 이용하면 오류 메시지가 뜹니다.
가장 먼저 워드프레스에 로그인을 한 후, 왼쪽 카테고리에 있는 '테마 디자인(Appearance)'에서 '테마 > Add New'를 선택합니다. 그다음, '테마 업로드' 버튼을 눌러 두 번째 zip 파일을 업로드하고 라이선스 키를 입력하면 설치가 완료됩니다.
Semplice를 Wordpress에 설치하는 과정(5) Figma를 이용해 웹사이트 디자인하기
Semplice를 통해 좀 더 쉽고 빠르게 디자인 포트폴리오 웹사이트를 제작하기 위해서는 미리 디자인 툴을 활용해 자신의 웹사이트를 디자인하는 것이 좋습니다. 일종의 길잡이 역할을 해줄 목표를 설정하는 것입니다. Semplice는 탬플릿을 제공하지 않기 때문에 망망대해에서 길을 잃지 않기 위해선 미리 대표 화면들을 디자인해두어야 혼란 없이 사이트 제작에 들어갈 수 있습니다.
저는 Figma를 활용해 대표 화면들을 디자인했지만, Adobe XD나 Sketch 등 다른 프로그램을 사용하셔도 됩니다. 다만 px(혹은 dp) 값을 쉽게 확인할 수 있는 툴 사용을 권장합니다. Semplice는 사용자가 코딩 지식 없이도 웹사이트를 제작할 수 있도록 돕지만, 프로그램 자체는 코딩을 기반으로 하고 있기 때문에 패딩부터 위치 조정까지 지정된 값(숫자)을 입력하는 방식을 사용합니다. 때문에 디자인 툴에서 px(혹은 dp) 값을 확인하고 이를 기준으로 Semplice에 값을 입력하시면 좀 더 수월하게 제작할 수 있습니다.
Semplice의 입력창 화면