워드프레스 이미지 모서리 둥글게 CSS 초간단 변경 방법 3초 완성

인터넷 서핑을 하다가 문득 다른 사람들의 블로그를 보면 참 부러울 때가 많습니다. 특히 세련된 느낌을 주는 사이트들을 가만히 살펴보면 자잘한 디테일에서 차이가 나더군요. 가장 대표적인 부분이 바로 사진의 외곽선입니다. 대다수 기본 테마에서는 사진이 아주 뾰족하고 날카로운 직사각형 모양으로 박혀서 나옵니다. 솔직히 말해서 조금 딱딱하고 투박해 보인다는 느낌을 지우기 어렵습니다. 저도 처음에는 그냥 주는 대로 쓰다가 인스타그램처럼 둥글고 감성적인 분위기를 내고 싶어서 이리저리 방법을 찾아 헤맸던 기억이 납니다. 많은 분들이 워드프레스 이미지 모서리 둥글게 CSS 초간단 적용법을 몰라서 포토샵으로 일일이 사진을 깎아서 올리시는데, 정말 손이 많이 가고 지치는 작업입니다. 이번 글에서는 일일이 고생하지 않고 단 몇 줄의 문장만으로 사이트 전체 사진을 부드럽게 바꿔서 방문자가 더 오래 머물고 싶게 만드는 치트키를 나누어 보려고 합니다.

왜 둥근 모서리 사진이 블로그 체류 시간을 늘려줄까요?

우리가 스마트폰 앱을 켜거나 유명 브랜드의 공식 홈페이지에 들어가 보면 각진 요소를 찾기가 오히려 더 어렵다는 사실을 눈치채셨을 겁니다. 예전에는 각지고 딱딱한 화면이 기술적이고 정밀한 느낌을 준다고 믿었지만, 시대가 흐르면서 사용자 경험에 대한 연구가 아주 많이 축적되었습니다. 시각 인지 심리학 리서치 자료들을 살펴보면 인간의 눈은 뾰족한 모서리를 마주할 때 무의식적인 시각적 위협이나 거부감을 느낀다고 합니다. 반면 곡선은 시선을 부드럽게 감싸 안아 안구의 피로도를 낮춰준다는 해석이 많습니다. 화면이 편안하면 독자는 자연스럽게 글에 더 몰입하게 되고 이는 자연스럽게 페이지에 머무는 시간의 상승으로 이어지게 됩니다.

저 역시 예전에 쇼핑몰이나 다양한 고객들의 사이트 관리 작업을 대행하면서 이런 레이아웃의 미세한 변화가 주는 파급력을 자주 체감하곤 했습니다. 텍스트를 아무리 알차게 적어도 시각적인 요소가 투박하면 독자들은 금세 피로를 느끼고 뒤로 가기 단추를 누르기 일쑤였습니다. 특히 요즘 감성적인 소품을 팔거나 감성 글귀를 올리는 공간일수록 시각적 편안함은 절대적입니다. 워드프레스 이미지 모서리 둥글게 CSS 초간단 팁이 단순히 보기 좋은 떡을 만드는 과정이 아니라, 방문자의 이탈을 막는 아주 든든한 방어선 역할을 해 주는 셈입니다. 복잡한 도구를 설치해서 사이트를 무겁게 만들지 않고 아주 가볍게 디자인 레이아웃을 고치는 방향으로 접근해야 장기적인 운영에도 큰 이득이 됩니다.

3초 만에 끝나는 border-radius 기본 원리 알아보기

디자인을 바꾼다고 하면 지레 겁부터 먹고 어려운 영역이라고 생각하시는 분들이 정말 많습니다. 하지만 웹사이트의 모양을 꾸미는 규칙은 생각보다 단순한 약속으로 이루어져 있습니다. 우리가 사진의 테두리를 깎기 위해 사용할 유일한 문장은 바로 border-radius 라는 명령어입니다. 이것은 사진의 네 군데 귀퉁이를 반지름이 얼마인 원 형태로 둥글게 깎아낼 것인지 지정하는 규칙입니다. 단위를 지정할 때는 보통 픽셀 단위를 의미하는 px를 쓰거나 전체 크기 대비 비율을 뜻하는 %를 주로 사용하곤 합니다. 이 규칙 하나만 제대로 이해해 두면 언제든지 내 입맛대로 웹사이트를 요리조리 바꿀 수 있습니다.

예를 들어 일할 때 어떤 사진의 테두리에 이 규칙을 적고 값을 8px나 12px 정도로 작게 주면 아주 살짝 경계선만 다듬어진 자연스러운 모양새가 됩니다. 최근 트렌디한 테크 블로그나 지식 공유 사이트들을 보면 대부분 이 정도의 은은한 값을 주어 세련미를 확보합니다. 반대로 이 값을 50%라는 극단적인 비율로 지정하면 정사각형 모양의 사진이 완벽한 동그라미 형태로 변하게 됩니다. 필자의 프로필 사진이나 인물 소개란을 꾸밀 때 아주 유용하게 쓰이는 방식입니다. 수치를 조금씩 바꿔가면서 내 블로그 테마와 가장 잘 어울리는 황금 비율을 찾아내는 것도 나름의 쏠쏠한 재미가 있습니다.

워드프레스 관리자 화면에서 직접 CSS 코드 추가하는 단계

원리를 알았으니 이제 우리의 실제 작업 공간인 워드프레스에 직접 적용해 볼 차례입니다. 간혹 이런 설정을 하겠다고 무거운 외부 플러그인을 새로 설치하시는 분들이 계시는데, 저는 개인적으로 권장하지 않습니다. 플러그인이 자꾸 늘어나면 나중에 사이트가 무거워지고 오류가 날 확률만 높아지기 때문입니다. 워드프레스 자체 기능을 이용하면 마우스 클릭 몇 번과 복사 붙여넣기만으로도 충분히 해결이 가능합니다. 우선 본인의 관리자 페이지에 접속한 뒤 왼쪽 메뉴 창을 가만히 살펴보시기 바랍니다. 테마의 종류에 따라 진입 경로가 살짝 다를 수 있으나 핵심 줄기는 거의 비슷합니다.

가장 보편적인 방법은 외모 메뉴 밑에 있는 사용자 정의하기로 들어가는 것입니다. 화면이 새로 바뀌면서 왼쪽에 여러 세부 설정 목록이 뜨는데, 맨 아래쪽을 보면 추가 CSS라는 영문이나 한글 탭이 보이실 겁니다. 거기를 누르면 마치 빈 연습장 같은 하얀 입력 창이 등장합니다. 최근에 나온 풀 사이트 편집 기능을 쓰는 테마라면 글 편집 화면 우측 상단의 스타일 아이콘을 누르고 더보기 단추를 통해 레이아웃 규칙을 넣는 칸을 찾을 수도 있습니다. 어떤 방식이든 규칙을 적을 수 있는 공간을 찾았다면 절반은 성공한 셈입니다. 이제 그 빈칸에 우리가 원하는 대상을 지목하고 다듬는 문장을 툭 넣어주기만 하면 끝이 납니다.

전체 본문 이미지 모서리 둥글게 처리하는 치트키 문장

이제 빈 연습 칸에 채워 넣을 구체적인 주문서를 공유해 드리겠습니다. 우리가 작성하는 글 안의 모든 그림에 규칙을 한 번에 먹이고 싶다면, 글 영역을 뜻하는 이름표와 그림 태그를 조합해서 명령을 내려야 합니다. 대다수의 워드프레스 블로그는 본문 영역을 .entry-content 라는 클래스 이름으로 부르고 있습니다. 따라서 이 영역 안에 들어있는 img 요소를 콕 집어서 테두리를 깎아달라고 적어주면 전체가 일괄적으로 변경됩니다. 매번 글을 쓸 때마다 따로 만질 필요가 없어서 눈이 번쩍 뜨일 만큼 편리한 방식입니다.

만약 본인이 쓰는 테마가 제너레이트프레스나 뉴스페이퍼 같은 대중적인 테마라면 아래 정리해 드린 예시 상자 안의 문장을 그대로 복사해서 추가 CSS 칸에 붙여넣고 저장 단추를 누르시면 됩니다. 수치를 15px 정도로 설정해 두면 딱딱했던 본문 사진들이 순식간에 둥글스름하고 포근한 느낌으로 옷을 갈아입는 장관을 목격하실 수 있습니다. 수많은 글들을 일일이 수정하지 않아도 기존에 올려둔 수백 개의 과거 글까지 한꺼번에 변하기 때문에 일의 효율성이 상상을 초월할 정도로 높아집니다.

특정 사진만 골라서 내 맘대로 테두리 깎는 개별 설정법

전체 사진을 다 바꾸는 것도 좋지만, 일을 하다 보면 어떤 사진은 그냥 원래대로 뾰족하게 두고 싶고, 특정 사진만 아주 동그랗게 만들고 싶을 때가 생기기 마련입니다. 예컨대 본문 중간에 들어가는 도표나 캡처 화면은 모서리가 너무 많이 깎이면 외곽에 있는 글씨가 잘려 나가서 가독성을 해칠 수 있습니다. 이럴 때는 전체를 바꾸는 방식 대신, 내가 원하는 그림 한 장만 족집게처럼 골라서 별도의 이름표를 붙여주는 개별 지정법을 활용하시는 것이 좋습니다.

워드프레스의 기본 블록 편집기를 쓰신다면 방법은 아주 간단합니다. 글을 쓰다가 원하는 그림 블록을 마우스로 선택한 뒤, 오른쪽 도구 창 맨 아래에 있는 고급 탭을 펼쳐보십시오. 그러면 추가 CSS 클래스라는 작은 입력 칸이 보일 것입니다. 여기에 나만의 특별한 별명, 예컨대 my-round-img 같은 단어를 임의로 적어 넣는 것입니다. 그러고 나서 추가 CSS 관리 창으로 이동해 이 별명을 가진 녀석만 모서리를 둥글게 해달라고 문장을 적어두면 됩니다. 이렇게 하면 다른 사진들은 원래 모양을 유지하면서, 내가 지정한 그 사진만 쏙 골라서 예쁘게 라운딩 처리가 됩니다.

디자인 수정 후 화면이 안 바뀔 때 대처하는 꿀팁

분명히 알려준 대로 똑같이 따라 하고 저장까지 완벽하게 눌렀는데, 실제 내 블로그 글을 켜보니 사진이 여전히 날카롭고 뾰족하게 나와서 당황하시는 경우가 종종 발생합니다. 저도 처음에 작업할 때 이 현상 때문에 모니터 앞에서 머리를 쥐어짜며 당황했던 기억이 생생합니다. 이는 열에 아홉은 오류가 아니라 컴퓨터나 서버가 기존의 낡은 디자인 기억을 그대로 들고 있는 캐시 현상 때문에 일어나는 일입니다. 기존 기억을 완전히 깨끗하게 지워주어야 새 옷으로 갈아입은 화면이 제대로 표시됩니다.

이럴 때는 우선 워드프레스에 설치된 캐시 플러그인의 전체 비우기 단추를 가볍게 눌러주시는 것이 첫걸음입니다. 그런 다음 내가 글을 확인하는 인터넷 브라우저에서도 강력한 새로고침을 시도해야 합니다. 키보드에서 컨트롤 단추와 쉬프트 단추를 동시에 누른 상태에서 알파벳 R을 누르거나 F5를 누르면 브라우저가 저장해 둔 옛날 기억을 무시하고 서버에서 새로운 디자인을 날것 그대로 받아옵니다. 모바일 폰에서도 간혹 안 바뀐 것처럼 보일 수 있으니, 시크릿 모드 창을 열어서 주소를 치고 들어가 보면 둥글둥글하게 바뀐 예쁜 사진들을 비로소 만나보실 수 있을 겁니다.