퍼블리싱

퍼블리싱과 디자인, 개발은 어떻게 나뉘나요?

디자인은 화면의 모습을 정하고, 퍼블리싱은 그 모습을 브라우저가 읽는 코드로 옮기고, 개발은 예약 · 결제처럼 데이터를 저장하고 처리하는 기능을 만들어요. 작은 홈페이지에서는 한 사람이 여러 단계를 함께 맡기도 해요.

퍼블리싱에는 주로 세 가지 언어를 써요. HTML은 제목 · 글 · 사진 같은 내용의 뼈대, CSS는 색 · 크기 · 배치 같은 꾸밈, 자바스크립트는 메뉴 열기 · 사진 넘기기 같은 움직임을 맡아요.

사장님에게 퍼블리싱이 중요한 이유는 손님이 실제로 만나는 건 시안이 아니라 퍼블리싱된 화면이기 때문이에요. 같은 시안이라도 퍼블리싱을 꼼꼼히 하면 폰에서 더 읽기 쉽고 빠른 홈페이지가 돼요.

예약 · 결제가 없는 소개 홈페이지라면 디자인과 퍼블리싱만으로 완성되기도 해요. 반대로 예약 · 결제가 들어가면 퍼블리싱된 화면에 개발한 기능을 연결하는 과정이 더해져 일정이 길어져요.

퍼블리싱이 잘됐는지는 무엇으로 판단하나요?

겉모습이 시안과 같은지보다, 다양한 화면과 상황에서 무너지지 않는지가 퍼블리싱 품질이에요. 같은 화면이라도 코드를 어떻게 짰느냐에 따라 검색 노출과 속도가 달라져요.

이런 기준은 눈으로 바로 보이지 않아 직접 확인하기 어렵지만, 업체에 ‘어떤 기준으로 점검했는지’ 물어보는 것으로 충분해요. 구글이 무료로 제공하는 PageSpeed Insights에 주소를 넣어 속도 점검 결과를 함께 보는 방법도 있어요.

웹 접근성은 장애가 있는 손님만을 위한 것이 아니에요. 글자와 배경의 색 대비가 충분하고 버튼 이름이 분명한 화면은 햇빛 아래에서 폰을 보는 손님, 글자를 크게 키워 쓰는 어르신 손님에게도 편해요.

• 제목 · 소제목이 실제 제목 태그로 되어 있어 검색과 화면 낭독기가 구조를 읽을 수 있는지
• 폰 · 태블릿 · 컴퓨터 어느 폭에서도 글자와 사진이 겹치지 않는지
• 사진 용량이 줄여져 있어 느린 데이터 환경에서도 빨리 열리는지
• 버튼이 손가락으로 누르기 충분히 큰지
• 폰 설정에서 글자를 크게 해도 내용이 잘리지 않는지

사진 설명(alt)은 어떻게 써야 하나요?

사진 설명(alt)은 사진이 보이지 않는 사람에게 사진 내용을 대신 전하는 짧은 문장이에요. 사진이 안 열릴 때나, 화면 낭독기로 홈페이지를 듣는 손님에게 이 문장이 읽혀요.

‘사진’, ‘이미지1’처럼 쓰면 아무 정보도 전하지 못해요. 카페 메뉴 사진이라면 ‘딸기 생크림 케이크 한 조각과 아메리카노’처럼 사진에 보이는 것을 구체적으로 적어요.

구글도 이미지 검색에서 alt를 이미지 정보를 전하는 가장 중요한 속성으로 안내하고 있어요. 다만 키워드를 억지로 나열하는 건 오히려 좋지 않으니, 사진을 설명하는 자연스러운 문장으로 쓰세요. 꾸밈용 무늬처럼 의미 없는 이미지는 설명을 비워 두는 게 맞아요.

퍼블리싱된 화면은 어떻게 확인하나요?

퍼블리싱 결과는 한 기기에서만 보면 문제를 놓치기 쉬워요. 아래 순서로 10~15분이면 대부분의 문제를 찾을 수 있어요.

문제를 발견하면 어떤 기기에서 어떤 화면이었는지 캡처와 함께 알려 주세요. 퍼블리싱 문제는 특정 기종이나 화면 폭에서만 생기는 경우가 많아서, 기기 이름이 있으면 훨씬 빨리 고칠 수 있어요.

확인할 때 시안을 옆에 띄워 두고 비교하면 좋아요. 다만 화면 폭이 달라서 생기는 작은 차이는 자연스러운 것이니, 정보가 빠지거나 순서가 바뀐 곳 위주로 봐 주세요.

1. 01사장님 폰과 가족 · 직원의 다른 기종 폰에서 같은 화면을 열어요.
2. 02폰을 가로로 돌려 보고 배치가 무너지지 않는지 봐요.
3. 03폰 설정에서 글자 크기를 키운 뒤 다시 열어 봐요.
4. 04컴퓨터에서 브라우저 창을 천천히 줄여 보며 칸이 쌓이는 모습을 확인해요.
5. 05와이파이를 끄고 데이터로 열어 사진이 너무 늦게 뜨지 않는지 봐요.
6. 06모든 메뉴 · 버튼 · 전화번호 링크를 한 번씩 눌러 봐요.

퍼블리싱 단계에서 자주 생기는 문제는 무엇인가요?

가장 흔한 문제는 시안에 들어간 짧은 임시 문구가 실제 긴 문구로 바뀌면서 칸이 넘치는 경우예요. 미용실 시술명이 길거나 공방 클래스 설명이 길면 폰에서 줄이 여러 번 바뀌며 배치가 흔들려요.

가격표나 시간표처럼 칸이 많은 표는 폰에서 옆으로 넘쳐 잘리기 쉬워요. 이런 내용은 폰에서 카드 형태로 바꿔 보여 주는 등 다른 배치가 필요할 수 있어요.

공방 상품 상세처럼 사진이 많은 페이지는 화면에 가까워질 때 사진을 불러오는 방식(지연 로딩)을 쓰면 첫 화면이 빨라져요. 사진이 많은 페이지의 속도를 어떻게 챙기는지 업체에 물어보세요.

• 용량이 큰 원본 사진을 그대로 올려 첫 화면이 늦게 뜨는 경우
• 폰에서 팝업이 화면 전체를 가려 닫기 버튼을 찾기 어려운 경우
• 글꼴 파일이 무거워 글자가 늦게 나타나는 경우
• 컴퓨터에서만 보이는 정보가 폰에서는 빠져 있는 경우

퍼블리싱에 대해 제작사에 무엇을 물어보면 되나요?

퍼블리싱은 사장님이 따로 고를 일은 없지만, 기준을 물어보면 업체가 어떤 품질을 약속하는지 알 수 있어요.

공개한 뒤 폰 운영체제나 브라우저가 업데이트되면 드물게 화면이 달라지기도 해요. 이런 경우 유지관리에서 고쳐 주는지도 함께 확인해 두면 좋아요.

폰 화면을 같은 홈페이지 안에서 반응형으로 맞추는지, 폰 전용 화면을 따로 만드는지도 물어보세요. 따로 만드는 방식이라면 내용을 고칠 때 두 곳을 모두 고쳐야 할 수 있어요.

• 어떤 기기와 브라우저에서 확인하는지
• 사진 용량을 줄이고 속도를 점검하는지
• 사진 설명(alt) · 제목 구조 같은 검색 · 접근성 기본을 넣는지
• 가격 · 영업시간 같은 글자를 나중에 고칠 때 누가 어떻게 고치는지