brunch

You can make anything
by writing

C.S.Lewis

by 임유진 Jan 26. 2020

Semplice로 사이트 제작하기

너무 아름다운 포트폴리오 사이트를 봐 버린 죄


작업을 정리해야겠다고 생각은 늘 했지만, 어떻게 할까 생각하면 늘 막막했다. 먼저 문서로 정리하기보다 라이브 되는 매체가 있으면 좋겠어서 웹을 만들기로 했다. 한/영 동시에 만들고 싶기도 했고 많은 글과 자료들을 담아둘 수 있다는 것도 이유였다. 또한 작업은 웹으로 정리해 두는 것이 검색에도 노출될 수 있고, 불특정다수가 볼 수 있는 라이브되는 페이지이다 보니 책임감이 더 필요할 것 같다는 생각이 들어 좋을 것 같았다.


그 이후로 포트폴리오 템플릿을 제공해 주는 여러가지 사이트를 비교해 보았다. 나는 이전까지 사이트를 만들어 본 적이 없었고, 나모 웹 에디터로도 뭘 만들어 본 적이 없다. 워드프레스는 많이 들어 봤지만 다루어 본 적 없었다.  CSS/HTML은 공부한 적 있지만 그걸로 웹을 만들 정도는 아니었다. 그러다보니 후보가 몇 가지로 좁혀졌다. 최종적으로는 Semplice로 만들기로 했는데, 그 이유는 내가 봤던 가장 아름다운 사이트가 여기 쇼케이스에 있었기 때문이다. 그러면 나 같은 왕초짜가 여기까지 어떻게 접근하고 결론내렸는지를 (기억하기 위해서) 정리해 본다.





시작 전 알아둬야 할 것


자유도

**Semplice는 템플릿이 없다**  생각해 보면 문서로 작업을 정리할 때에도 템플릿 없이 직접 제작했던 것 같은데, 이것 역시 그렇다. 그래서 시간이 몇 배로 든다. 특히 나처럼 웹을 만들어보지 않은 사람들은 더 그럴 수 있다. CSS/HTML/Javascript 코드를 보고 활용할 줄 안다면 훨씬 더 유려한 사이트를 만들 수 있을 것이다.


호스팅/도메인 따로

여러 포트폴리오 사이트에서는 도메인을 제공해 주는 경우가 있다. 이름.사이트이름.com과 같은 경우가 그것인데, Semplice는 호스팅 사이트에서 도메인을 결제해서 등록해야 하는 시스템이어서 조금 더 번거로울 수 있다.


시작하기 전에, 아래의 미디엄 글을 꼭 한번 읽어보시는 것을 추천한다.

어느 정도의 자유도를 요구하고 어떤 스타일을 추구하는지를 알 수 있을 것이다.







1. 결제하기

https://www.semplice.com/get-semplice


Single edition $99


Single/Studio 버전이 있는데 Blocks기능 빼고는 스튜디오에서 딱히 원하는 것이 없어서 Single을 99불 주고 구입하였다. 구입하면 이메일로 프로그램을 다운로드 할 수 있는 링크가 뜨는데 링크를 누르면 다운로드 받고 시리얼 키를 복사해 놓으면 된다. Single을 구매하고 기능이 부족하다 느끼면 추후로 Studio로 금액을 내고 업데이트 할 수 있으니 처음에 너무 고민하지 않아도 될 것 같다.




2. 웹호스팅/도메인 구매하기

https://www.semplice.com/project/flywheel


호스팅 사이트를 골라서 구입하면 되는데, Semplice에서는 Flywheel이라는 사이트를 추천하고 있다. 약간 끼워팔기 같다는 느낌이 들어서 나는 무난해 보이는 Fastcomet 에서 구매하였다. 여기서 좋은 것은 24/7/365 채팅이 가능하다는 것인데 이렇게 빠른 답변은 처음 봤다. 옵션에 대해 설명해 주셔서 감사했다.

여기서 고민이 많았던 것이 도메인을 살 때 .com 이나 .design 중에 어떤 것이 나은가였다. 닷 디자인을 선택하고 싶었는데 좀 더 쿨해 보였고 가격도 조금 더 저렴해서.. 그렇지만 처음이므로 일단은 무난하게 닷컴으로 선택했다. 1년이 만료 되면, 그 때 다시 생각해 보기로 했다.





3. 도메인에 워드프레스 연결하기

https://help.semplice.com/hc/en-us/articles/360026529232



호스팅 사이트에서 결제 Domain Registration Confirmation 메일이 오고 난 후, 관련 사이트들을 뒤져 보니 메일에 워드프레스 연결하는 링크가 같이 온다고 하는데 어찌된 일인지 나는 1주일이 지나도 오지 않았다. 도메인을 눌러 가 보면 디폴트 페이지만 연결되어 있었다. 이게 호스팅 사이트마다 다른 것 같다. 애초에 Flywheel에서 구매했으면 이런 단계가 필요 없었을 것 같지만 내가 따로 호스팅사이트를 구해서 이 단계가 필요했던 것 같다. (아니면 아예 워드프레스로 제작하는 옵션을 구매하면 바로 왔을 수도 있다) 오른쪽 아래에 있는 Start a Chat 버튼을 눌러 상담사에게 물어 봤다.


Q : 제가 여기서 만든 호스팅을 워드프레스로 연결해야 하는데 어떻게 해야 하나요? 메일로 링크가 온다고 들었는데 1주일째 받지 못했읍니다.

A : 아 그건 좀 다른 얘기에요. 제가 대신 해드리겠읍니다.


그러니 곧 나에게 워드프레스를 연결한 도메인과, 어드민 링크, 아이디, 비밀번호를 같이 전달 주었다. 이걸로 워드프레스가 연결된 도메인에 접근/관리가 가능하다.




4. 워드프레스 다운로드 및 설치

https://help.semplice.com/hc/en-us/articles/360027234191-Installing-Semplice-in-Wordpress


그 다음에는 워드프레스 프로그램을 다운받는다. 다운 받은 후에는 위의 링크를 따라 워드프레스 Theme에 Semplice를 추가하고, 시리얼 키를 넣으면 이제 수정 가능한 셈플리스 어드민이 나오고 거기서부터 새로 사이트를 만들기 시작하면 된다.




5. TA-DA!


Theme에 셈플리스를 연결 하면 워드프레스 어드민에 오프닝 페이지가 나오고 여기서 하란 대로 초기 설정을 완료 하면 된다. 그 이후의 고군분투 상황은 이제 겪어 보면서 공유하겠습니다.





참고한 링크

https://vanschneider.com/how-to-create-a-ux-designer-portfolio-site-with-semplice

https://brunch.co.kr/@gange18/3



브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari