이번에 의뢰받은 프로젝트는 스퀘어스페이스를 기반으로 제작된 웹페이지의 커스터마이징 의뢰였다.
비슷한 사이트로 윅스(Wix)가 있는데, 이런 웹페이지 빌드 툴은 이용해본적이 없어서 많은 시행착오가 필요했다.
일단 이런 웹사이트 구축 툴들은 자체적으로 제공해주는 기능에 한해선 드래그앤드롭 만으로 그럴싸하게 꾸미는건 가능하지만, 약간의 커스터마이징이 필요한 단계가 오면, 정말 골치가 아파진다.
디자인 레이아웃, css와 html 을 제어하는데 제약사항이 상당히 많다.
스퀘어스페이스에서는 이런 단점들을 극복하기 위해 코드 주입 ( Code Injection ) 이라는 기능을 제공하는데, css 외 javascript 코드까지 주입, 직접 코드를 짜는 것과 더불어 외부 라이브러리를 가져와 커스터마이징 하는게 가능하다.
( 다만 이 기능을 사용하기 위해선 Business Plan 이상을 사용해야하며 연결제 기준, 월 18달러의 비용이 소요된다. )
하지만 이 기능이라고 만능은 아니다.
스퀘어스페이스의 기본 css의 네이밍과 구조를 고려한 설계를 해야되서, 외부라이브러리를 가져와 쓰는 경우 그 문제는 더욱 심각해진다.
외부 라이브러리를 주입 했을때 스퀘어스페이스의 일부 기능들이 동작하지 않는 상황까지 발생한다.
( 이번 프로젝트를 진행하면서 스퀘어스페이스 내부의 스타일 수정기능이 먹통되는 현상이 발생했는데, 정확히 어떤 부분이 원인이 되었는지는 아직 발혀내지 못했다. )
클라이언트의 요구사항에 대한 코드 구현자체는 어려움이 없었지만, 이런 자잘한 이슈들로 인해, 스퀘어스페이스 페이지에서 개발자 콘솔을 열어놓고 DOM 분석하는데만 꽤 많은 시간을 투자헀는데, 추후에 이번 삽질과정(?)을 정리해서 공유해 놓고자 한다.
