이제 나는 코드로 웹사이트를 만들어야하는데,
요즘 스프린트로 시장테스트 한다고 노코드툴을 또 사용하고 있다.
아무래도 빨리 만들어서 뿌려보고 진짜 개발할건지 말건지 결정해야 하는 상황에서
퀄리티도 일정 수준 이상 나와줘야 하기 때문에
노코드툴을 선택하게 된다.
아직까지 개발로는 그렇게 빠르고 퀄리티 있게 만들 자신까지는 없어서
요즘은 웹사이트로 홈페이지 만들어서 여기저기 뿌리고 다니고 있는데,
특히 웹사이트는 아임웹이 진입장벽이나 퀄리티 측면에서 괜찮다고 느껴진다.
물론 처음에는 원하는대로 안되는 게 많아서 한 섹터 만드는 데 좀 오래 걸리긴 했지만...
공식 사이트 읽고 어느 정도 돌아가는 원리만 이해하면 그 다음부터는 디자인적인 고민은 덜하면서 빠르게 기능 소개 페이지 정도는 만들 수 있다.
내 기준으로는 기획과 들어갈 이미지가 확실히 나와있다면 한 시간도 안 걸리는 것 같다.
현재 아임웹은 쇼핑몰 제작이 주 타겟이라, 아예 쇼핑몰의 모든 기능(회원가입, 결제, 관리자 페이지 등)까지 지원해주는 것 같지만, 대부분 유료에서 지원하는 기능이고 나처럼 한 페이지만 만든다면 무료로 충분한 것 같다.
그래서 오늘은 내가 아임웹을 사용했던 방법에 대해 적어보려고 한다.
템플릿 고르기
아임웹 홈페이지에 들어가면 상단에 템플릿 버튼이 있다.
아예 백지에서 처음부터 만들수도 있는데, 그것보단 기존 템플릿을 활용하는 게 훨씬 빠르고 기획적으로도 도움이 많이 됐다.
여러 개의 템플릿 중에서 미리보기를 통해 하나의 템플릿을 고르고 나면, 페이지 이름과 도메인 이름을 입력할 수 있고(나중에 변경 가능) 똑같은 디자인의 사이트가 개설된다.
무료 버전에서도 여러 개 만들 수 있으니 너무 신중할 필요는 없는 것 같다.
나는 이걸 골랐다. 어차피 완벽하게 내가 원하는 템플릿은 있을 확률이 적으므로, 내가 만들고자 하는 사이트의 전체적인 틀을 고른다고 생각하면 좀 더 고르기 쉬웠다.
상단에는 이걸 넣을거고, 섹터들이 이 정도 분리되어 있으니 여기 뭐를 넣어야지~정도의 느낌만 가지고 선택했다.
사이트가 개설되면 디자인 모드로 넘어가게 되는데,
디자인 모드에서는 기존에 있던 사진을 바꿔서 넣을 수도 있고, 새로운 섹터를 만들수도 있다.
기존에 있는 사진에 내가 넣고 싶은 이미지를 넣는 건 우클릭으로 해서 어렵지 않은데,
처음엔 새로운 요소나 섹터를 만들 때 기획안대로 어떻게 해야 할 지 조금 막막했었다.
그럴 땐, 객체 사이에 마우스를 갖다대면 생기는 플러스 버튼을 누르면 이런 창이 뜨는데,
원하는 요소를 선택하여 삽입할 수 있다.
웬만한 건 다 넣을 수 있고, 색상, 글씨 크기 간단한 html,css 조정까지 다 가능하다.
나는 여기서 보통 이미지, 텍스트, 여백을 활용했다.
예를 들어 이미지를 세 개 추가했을 때 이렇게 뜨는데, 여백을 활용하면 위치나 크기도 마음대로 조정할 수 있다.
간편하게 드래그 앤 드롭으로 위치를 옮길 수 있고,
이런 식으로 위치 조정이 가능하다.
이미지를 직접 삽입하면 크기 조정도 가능한데, 이미지의 하단에 생기는 까만 선으로만 크기를 조정할 수 있다.(처음에 이걸 몰라서 좀 오래 걸렸다...)
이미지 사이사이에 여백을 넣어서 여백 크기를 조정해 디자인을 조정할 수도 있다.
디자인알못에게는 요소들의 위치를 잡는데 정말 도움되는 기능이었다.
또 무엇보다 아임웹에서는 이렇게 홈페이지를 pc기준으로 제작하면
자동으로 모바일 기능도 어느정도 제작을 해주는데,
당연히 사진 크기나 순서 등이 달라서 모바일도 전용으로 제작을 해줘야 한다.
일정 크기까지는 반응형이고, 그 이하로는 모바일 전용 페이지로 넘어가는 것 같다.
그래도 한 사이트에서 PC와 모바일 두 버전을 지원해준다는 건 꽤 큰 메리트인 것 같다.
이렇게 코드 없이, 디자인적인 부담없이(다만 들어갈 이미지는 작업을 해둬야 함)
내가 만든 사이트...!의 일부...!
목업 이미지는 디자인 전공 능력자분을 납치해서 제작했다.
이 글을 보실지 모르겠지만 다시 한 번 감사합니다.
이렇게 뚝딱 제작한 건 일주일 동안 사용자 이메일 50건 넘게 수집했고,
1년동안 준비한 베타서비스는 사용자가 생각보다 적어서 꽤 큰 고민 중에 있다.
일단 둘 다 킵고잉 중인데, 이번 연휴에 결정해야지...
개발...! 공부도 잊지 말고...!
