삼표그룹

👋 들어가며

안녕하세요 퍼블리셔 한상현입니다.

삼표그룹의 오래된 홈페이지를 리디자인하면서 해당 리디자인된 홈페이지를 워드프레스와 접목하여 홈페이지를 구축하였습니다. 직접 was 퍼블리싱 워드프레스 구성 워드프레스 백엔드 커스텀을 완료하였습니다.

처음으로 PHP의 하드코딩이 아닌 Roots/Sage라는 모덴웹의 개발 워크플로우가 포함된 테마를 사용하였습니다.

webpack
tailwind
blade

홈페이지를 구축하면서 얻은 작은 경험들을 적어보려합니다 😁

워드프레스 구성

이번 프로젝트에서 가장 핫한 이슈는 Roots/Sage 워드프레스 테마를 사용한 것입니다.

워드프레스 테마 작업을 하면서 가장 번거로웠던게 폴더 파일등등 여러 구조를 내가 직접 정리하고 사용해야해서 이 것을 고민하는 시간이 점점 늘어나고 가독성을 위해서 계속 리팩토링하다보니 이 것이 정해져있고 꼼꼼하게 정의된 예제가 있으면 좋겠다고 생각했습니다.

Roots/Sage의 10버전을 사용하게 되면서 이 문제를 아주 적절하게 해결했습니다. 테마는 지속적으로 업데이트 되어서 관리의 문제도 해결했습니다.

앞으로도 Sage10이 안정되 될때까지 사용할 프로젝트의 템플릿을 따로 만들었습니다.

Hansanghyeon/sage-vue-react-tailwind: sage 10 (beta-01) vue3, react, tailwind jit

퍼블리싱

😎 Awesome tailwind css!

그 동안 계속 사용해오던 Bootstrap을 포기하고 새롭게 시작해본 tailwind css였습니다.

결과는 대박!! 너무나 편리하고 유지보수하기 쉬워졌습니다.

하지만 tailwind css를 구성하고 처음으로 겪은 문제가 너무나 느린 빌드문제였습니다. 그래서 어떻게 방법이 없어서 개발환경 머신의 성능을 올리면 이 답답함과 기다림에서 벗어날 수 있을까? 하고 1차원적으로 해결해보려고 했습니다.

어떻게 이 답답함을 겪는 사람들은 없나? 찾게 되었습니다.

이미 이러한 문제를 알고있었고 tailwind측에서는 jit라는 이름으로 빌드하는 방식을 업데이트한 v3 v2.1(beta)에 도입했다고 했습니다.

아직은 베타 버전인 jit 모드 v3가 버전업되기 얼마 남지 않아서 테스트하면서 도입하면 좋을 것같다 생각해서 많은 오류들과 싸우면서 jit 모드를 도입했습니다. 설정을 수 없이 바꿔보고 뭐가 문제인지? 그러면서 더욱 잘 사용할 수 있게 경험치가 쌓였습니다.

앞으로도 모든 프로젝트에서 사용하게 될 것같습니다.

Alpine JS로 빠르게 스크립팅

tailwindcss의 짝꿍? alpinejs로 스크립트를 더더욱 빠르고 최소한의 도구로 ui 애니메이션 인터렉션을 구현할 수 있었습니다.

Body scroll lock

모바일과 데스크탑 여러 환경에서 모달 팝업을 띄웠을때 또는 스크롤을 잠궈야 할 때 각 환경에 맞게 코드를 짜기에 케이스가 많아서 전부 대응하기 어려웠습니다. 그래서 적절한 라이브러리를 찾아서 추가하였습니다.

인프라

Sage-10(beta)를 벗어나서 Sage v10.3.0으로 업데이트

테마 sage 10을 업데이트하면서 beeclover에서 운영하는 인프라 시스템과 저장소의 폴더 구조에대해서 많은 부분 고민을 하게되었다. 프로덕션에 나가는 저장소의 모습은 beeclover의 인프라에서 구축된 저장소의 폴더 구조와 동일하면 안된다. 이 테마를 접해서 개발하려는 개발자도 이해할 수 없는 독자적인 폴더 구조이기 때문이다.

단일 docker-compose.yaml에서 monorepo 형식에서 다시 단일 서비스 레포형식으로 변경하였다.

그리고 이 모든 인프라를 관리하는 beeclover/infra 저장소를 만들어서 여기서 beeclvoer의 인프라를 관리하게 한다.

업데이트가 이뤄지는 삼표같은곳은 동일한 워드프레스가 2개 이상 만들어져야하는데 이 구조를 beeclvoer/infra에서 관리하게 된다.

국제화 (internationalization, I18N)

국제화를 이루기위해서 워드프레스에 다국어를 구성해야합니다. 워드프레스에서는 WPML이라는 유명한 워드프레스 다국어 플러그인이 있습니다. 하지만 협업 관계에 있어서 WPML 플러그인은 사용하기 매우 번거롭고 워드프레스를 깨끗하게 관리하기 어렵습니다. 기존의 사이트를 복제해서 동일테마를 사용하고 다국어를 적용하는 방법으로 선택하였습니다.

일단 다국어를 하기위해서 2가지 옵션이있습니다.

sub path example.com/en example.com/ko
subdomain en.example.com example.com

번역

.po 파일을 가지고 워드프레스 테마에 다국어를 도입합니다. Sage 10.x: Localization | Roots Documentation 참고하였습니다.

워드프레스의 locale 변경

워드프레스의 locale은 4버전 이전에는 defined('WPLANG')으로 설정하였습니다. 4버전 이후로는 따로 설정해주지 않아도 워드프레스 설치시에 설정하였던 언어를 기반으로 설정됩니다.

코드로서 언어, 현지화를 바꾸는 방법

add_filter('locale', function ($locale) {
    return 'en_US';
});Code language: PHP (php)

원하는 언어로 변경하면 됩니다.

그렇게 되면 언어 파일로 설정한 en_US.mo 파일을 기준으로 언어가 변경됩니다.

echo __('테스트', '언어 도메인');  <em>// test</em>Code language: JavaScript (javascript)

결과

삼표그룹의 워드프레스에 적용할 다국어 방식과 인프라를 모두 셋팅하였는데 클라이언트 측에서 이렇게 복잡하고 실제로 번역을 진행할 리소스가 없기 때문에 다른 방향을 제시해달라 했다.

Weglot Translate 플러그인으로 자동 번역되게 변경하였습니다.