<div id="readability-page-1" class="page"><div><figure><img data-dominant-color="72733b" data-has-transparency="false" decoding="async" width="1600" height="564" src="https://mytory.net/wp-content/uploads/2024/06/block.webp" alt="블록을 쌓고 있는 모습" data-srcset="https://mytory.net/wp-content/uploads/2024/06/block.webp 1600w, https://mytory.net/wp-content/uploads/2024/06/block-768x271.webp 768w, https://mytory.net/wp-content/uploads/2024/06/block-1536x541.webp 1536w" data-sizes="(max-width: 1600px) 100vw, 1600px"><figcaption>Photo by <a href="https://unsplash.com/@lastnameeaster?utm_source=instant-images&amp;utm_medium=referral" target="_blank" rel="noopener noreferrer">La-Rel Easter</a> on <a href="https://unsplash.com/" target="_blank" rel="noopener noreferrer">Unsplash</a></figcaption></figure><h2>3일만에 뚝딱</h2><p>3일만에 뚝딱 <a href="https://purreung.com/">일러스트 작가의 작품 전시 사이트</a>를 하나 만들었습니다. 코드는 거의 쓰지 않았고요<sub>(CSS 몇 줄 사용했고, 카카오톡 오픈챗 버튼은 플러그인으로 만들었습니다)</sub>. </p><p>워드프레스의 사이트 편집기를 이용했습니다. 기반 테마는 Twenty Twenty-Four 테마였는데요. 아래 두 이미지를 한 번 비교해 보세요. 앞의 것은 테마 기본 디자인이고, 뒤의 것은 이걸 제가 커스터마이징한 것입니다.</p><p>워드프레스를 활용하지 않고 코딩했으면 훨씬 오래 걸렸을 겁니다.</p><p>특히 갤러리 라이트박스와 문의 양식 작업같은 범용 기능은 구현하기 편했습니다. 드래그 앤 드롭으로 쭉쭉 만들었으니까요. 이메일 전송 서비스를 연동하는 것도 플러그인으로 처리했습니다. </p><p>관리 페이지야 워드프레스에선 이미 만들어져 있으니 말할 것도 없죠.</p><p>아래는 구현한 라이트박스 모습입니다.</p><figure><video autoplay="" loop="" muted="" poster="https://mytory.net/wp-content/uploads/2024/06/simply-gallery-block-plugin-cover.webp" src="https://mytory.net/wp-content/uploads/2024/06/simply-gallery-block-plugin.mp4" playsinline=""></video></figure><p>사이트 성능 튜닝도 쉬운 편입니다. 워드프레스의 구조는 널리 알려져 있으니 말입니다. 이미 있는 캐시 플러그인을 설치하니까 거의 모든 것이 한 방에 됐습니다. 700ms쯤 걸리던 서버측 시간이 거의 200ms로 줄었습니다. </p><p>이미지 레이지 로딩처럼 간단한 것은 설치한 플러그인을 이용해 코드 없이 클릭 한 번으로 완료됐습니다.</p><p>검색엔진에 알리는 것과 통계를 보는 것도 매우 편리합니다. 통계는 특히 관리자단에 통합하는 게 일반 코딩으로는 상당히 손이 가는데, 워드프레스에서는 플러그인으로 처리됩니다.</p><p>아래는 이 블로그의 대시보드인데요. 통계가 바로 나오고 있죠.</p><figure><img data-dominant-color="dbdfde" data-has-transparency="false" decoding="async" width="1920" height="1062" src="https://mytory.net/wp-content/uploads/2024/06/my-dashboard.webp" alt="" data-srcset="https://mytory.net/wp-content/uploads/2024/06/my-dashboard.webp 1920w, https://mytory.net/wp-content/uploads/2024/06/my-dashboard-768x425.webp 768w, https://mytory.net/wp-content/uploads/2024/06/my-dashboard-1536x850.webp 1536w" data-sizes="(max-width: 1920px) 100vw, 1920px"></figure><h2>적정 웹사이트에 효과적</h2><p>워드프레스 테마 편집기는 적정 사이트를 잘 만들기에 좋습니다. </p><p>필요를 적정하게 충족하면서도 <strong>천편일률적인 사이트가 나오지 않는다는 점이 중요합니다.</strong> 모두 Twenty Twenty-Four 테마를 이용하면서도 느낌이 전혀 다르게 만들 수 있는 겁니다.</p><p>물론 워드프레스로 만드는 것이 효과적이지 않은 사이트도 있습니다. Figma 같은 앱을 만드는 데 워드프레스는 부적절합니다. 뉴스 사이트도 규모가 커지고 복잡해지면 공수가 꽤 들어가서 워드프레스를 사용하는 장점이 많이 상쇄될 겁니다.</p><p>예컨대 제가 관리하는 뉴스 사이트는 제목을 구성하는 요소가 말머리, 앞 부제, 제목, 뒷 부제 이렇게 4가지나 됩니다. 이걸 블록 에디터에 잘 조화시킬 방법을 고민하면 좀 복잡해집니다. 그러나 라라벨을 이용하고 있으므로 그냥 코딩을 하면 되죠.</p><p>이런 예외를 빼면 사이트 주문의 대부분을 차지하는 중소 규모의 개인·상업 사이트들은 워드프레스에 딱인데요. 프리랜서나 웹사이트 에이전시가 수주받는 많은 사이트들은 중소 규모 사이트입니다. 개인 블로그나 프리랜서 개인 사이트는 말할 것도 없고요.</p><figure><img data-dominant-color="dae3e7" data-has-transparency="false" decoding="async" width="1920" height="1062" src="https://mytory.net/wp-content/uploads/2024/06/my-wp.webp" alt="" data-srcset="https://mytory.net/wp-content/uploads/2024/06/my-wp.webp 1920w, https://mytory.net/wp-content/uploads/2024/06/my-wp-768x425.webp 768w, https://mytory.net/wp-content/uploads/2024/06/my-wp-1536x850.webp 1536w" data-sizes="(max-width: 1920px) 100vw, 1920px"><figcaption>워드프레스 테마 편집기로 구현한 또다른 사이트. 역시 Twenty Twenty-Four 테마입니다.</figcaption></figure><p>물론 중소규모 사이트라도 워드프레스에서 구현하기 까다로운 요구가 나올 수는 있습니다. 그런 것은 꼭 필요한 기능인지 가려서 협상을 잘 해야 할 겁니다. 구현에 드는 시간을 고려해 비용을 제시하면 됩니다. 적정한 수준에서 협의를 볼 수 있다면 클라이언트는 매우 싸게 원하는 사이트를 얻는 것이고, 개발자는 효율적으로 일을 하게 되니 좋습니다.</p><h2>개발자가 유리한 점</h2><p>프론트엔드 개발자는 이런 일을 하는 데 유리합니다. 부족한 것들을 CSS 코딩으로 해결할 수 있기 때문입니다. 예컨대, 아래는 이 블로그에 제가 넣은 추가 CSS중 일부입니다.</p><pre><code>* {
  word-break: keep-all!important;
}
html {
  scroll-behavior: smooth;
}</code></pre><p>우리 개발자 입장에서는 별거 아니지만 비개발자는 정말 하기 힘든 것입니다.</p><p><strong>제 경우는 <a href="https://mytory.net/archives/13549" data-type="post" data-id="13549">PHP로 워드프레스로 개발</a>을 할 줄 알기 때문에 더욱 유리했는데요.</strong> 부족한 게 있을 때 플러그인을 만들어서 해결했기 때문입니다. 이건 비개발자는 절대 하지 못하는 것이죠.</p><p>예컨대 카카오톡 문의 플로팅 버튼이 필요했는데 기존 플러그인으로는 해결을 하지 못했습니다. 그래서 ChatGPT를 이용해 간단하게 코딩하고 살짝 손봐서 기능을 넣었습니다.</p><p>ChatGPT 활용이 효과적이라는 점도 장점입니다. 워드프레스는 정형화돼있고, 학습 자료도 많기 때문에 ChatGPT가 코드를 아주 잘 짜줍니다.</p><h2>서버 세팅</h2><p>서버 세팅을 하고 성능 튜닝을 하는 과정도 비개발자에게는 매우 힘든 일입니다. 워드프레스가 쉽다 해도 그걸 설치하고 잘 사용하는 것은 또다른 문제죠.</p><figure><video autoplay="" loop="" muted="" src="https://mytory.net/wp-content/uploads/2024/06/performance-tuning.mp4" playsinline=""></video><figcaption>개발자들은 개발자 도구를 이용해 성능 튜닝을 쉽게 할 수 있습니다</figcaption></figure><p>그러나 개발자들은 서버를 기본적으로 알고, 성능 튜닝도 할 수 있기 때문에 유리합니다.</p><h2>결론</h2><p>정리해서 말하면 워드프레스는 웹사이트를 만드는 효과적인 도구라는 점이고, 커스터마이징도 쉬운 편이기 때문에, 개발자들이 이 좋은 도구를 활용한다면 좋은 퍼포먼스를 낼 수 있다는 이야기입니다.</p><p>관련해 워드프레스 사이트 편집기를 익힐 수 있는 학습 자료를 두 개 추천해 드립니다.</p><ul><li><a href="https://www.youtube.com/watch?v=1ThMIssK3IY">WordPress 5.9 Tutorial | Full Site Editing Tutorial</a>: 영어로 된 수업이지만, 자막을 “영어(자동 생성됨)”으로 설정하고 다시 “자동 번역”에서 “한국어”를 선택하면 들을만 합니다.</li>
<li><a href="https://bit.ly/mytory-easy-wp">누구나 할 수 있는 워드프레스 홈페이지 만들기 — 기획부터 출시까지 한 방에 OK</a>: 제가 촬영한 워드프레스 홈페이지 만들기 수업입니다. 클래스101이고요. <a href="https://my-wp.net/a/654">싸게 보는 방법</a> 참고하세요.</li></ul><div><div><figure><img data-dominant-color="e6cbcb" data-has-transparency="false" decoding="async" width="1440" height="1080" src="https://mytory.net/wp-content/uploads/2024/06/mytory-easy-wordpress-cover.webp" alt="" data-srcset="https://mytory.net/wp-content/uploads/2024/06/mytory-easy-wordpress-cover.webp 1440w, https://mytory.net/wp-content/uploads/2024/06/mytory-easy-wordpress-cover-768x576.webp 768w" data-sizes="(max-width: 1440px) 100vw, 1440px"></figure></div>
<div><p><strong>누구나 할 수 있는 워드프레스 홈페이지 만들기</strong> 수업에서<br>기획부터 출시까지 홈페이지 제작의 모든 것을 한 방에 얻으실 수 있습니다</p>
</div></div></div><div id="about"><figure><img width="300" height="300" src="https://mytory.net/wp-content/uploads/2024/05/profile-300x300-1.webp" alt=""></figure></div></div>

웹으로 말하기

3일만에 뚝딱 3일만에 뚝딱 일러스트 작가의 작품 전시 사이트를 하나 만들었습니다. 코드는 거의 쓰지 않았고요(CSS 몇 줄 사용했고, 카카오톡 오픈챗 버튼은 플러그인으로 만들었습니다). 워드프레스의 사이트 편집기를 이용했습니다. 기반 테마는 Twenty Twenty-Four 테마였는데요. 아래 두 이미지를 한 번 비교해 보세요. 앞의 것은 테마 기본 디자인이고, 뒤의 것은 이걸 제가 커스터마이징한 것입니다. 워드프레스를 활용하지 않고 코딩했으면 훨씬 […]

개발자의 워드프레스: 사이트 편집기를 활용해 효율적으로 홈페이지 만들기

댓글