관리자 화면과 디자인 모드 익히기

이제부터는 '어디를 누르는지'의 문제입니다

지난 장에서 우리는 템플릿과 AI의 도움을 받아 첫 사이트의 뼈대를 만들었습니다. 아마 화면에는 그럴듯한 메인 이미지도 있고, 메뉴도 있고, 버튼도 있을 것입니다. 그런데 막상 고치려고 하면 손이 멈춥니다.

"이 문구는 어디서 바꾸지?"

"이 사진을 지우면 전체가 망가지는 거 아닐까?"

"저장하면 바로 공개되는 건가?"

홈페이지 제작이 무서운 이유는 실력이 부족해서가 아니라, 화면의 구조를 아직 모르기 때문입니다. 컴퓨터를 처음 배울 때도 그랬습니다. '파일 저장'과 '다른 이름으로 저장'의 차이를 알고 나면 문서 작업이 갑자기 덜 무서워집니다. 아임웹도 똑같습니다. 어디를 눌러야 하는지만 알아도 홈페이지 수정은 훨씬 덜 무섭습니다.

이번 장에서는 아임웹 제작의 핵심 작업 공간인 관리자 화면과 디자인 모드를 익힙니다. 아직 예쁘게 만들려고 애쓰지 않아도 됩니다. 오늘의 목표는 단 하나입니다. 아임웹 화면을 보고 "아, 여기는 이런 일을 하는 곳이구나" 하고 감을 잡는 것입니다.

관리자 화면은 회사 홈페이지의 조종실입니다

아임웹에서 사이트를 만든 뒤 관리 화면으로 들어가면, 그곳은 단순한 편집기가 아닙니다. 회사 홈페이지의 조종실에 가깝습니다. 디자인을 고치고, 메뉴를 정리하고, 게시판 글을 관리하고, 문의 폼으로 들어온 내용을 확인하고, 도메인이나 검색 설정까지 다루는 곳이기 때문입니다.

초보자가 가장 먼저 구분해야 할 것은 관리자 화면과 디자인 모드입니다. 관리자 화면이 회사 홈페이지 전체를 운영하는 사무실이라면, 디자인 모드는 실제 방문자가 보는 화면을 직접 꾸미는 작업대입니다. 관리자 화면에서는 사이트의 설정과 기능을 관리하고, 디자인 모드에서는 페이지의 모습과 배치를 편집합니다.

아임웹 사이트에 로그인한 뒤 보통은 내 사이트 목록 또는 사이트 대시보드에서 작업할 사이트를 선택합니다. 여기서부터 자주 쓰는 이동 경로를 익혀두면 좋습니다.

• 디자인 모드: 실제 페이지의 화면, 섹션, 위젯, 이미지, 버튼을 수정하는 곳

• 페이지/메뉴 관리: 상단 메뉴, 하위 메뉴, 페이지 구성과 노출 여부를 정리하는 곳

• 게시판: 공지사항, 자료실, 뉴스, 고객 후기 같은 글 목록을 관리하는 곳

• 입력폼: 문의하기, 상담 신청, 견적 요청처럼 방문자가 정보를 남기는 양식을 관리하는 곳

• 환경설정: 사이트 기본 정보, 도메인, SEO, 권한, 운영 관련 설정을 다루는 곳

처음에는 모든 메뉴를 다 외울 필요가 없습니다. 회사 홈페이지 제작 초반에는 주로 디자인 모드와 페이지/메뉴 관리만 자주 사용합니다. 문의 기능을 붙일 때 입력폼을 열고, 공지사항을 만들 때 게시판을 열고, 공개 전 마무리 단계에서 환경설정을 확인하면 됩니다.

관리자 화면에 들어왔는데 필요한 메뉴가 보이지 않는 경우도 있습니다. 이때 "내가 잘못 들어왔나?" 하고 당황하지 마세요. 실제로는 권한 문제인 경우가 많습니다. 특히 회사에서 대표자나 기존 담당자가 나를 운영진으로 초대했더라도, 운영진 그룹의 세부 접근 권한이 닫혀 있으면 일부 관리자 메뉴가 보이지 않을 수 있습니다. 단순히 "관리자 권한을 받았는지"만 확인하지 말고, 해당 운영진 그룹에서 디자인, 게시판, 입력폼, 환경설정 같은 세부 메뉴 접근 권한이 열려 있는지도 확인해야 합니다.¹

실무에서는 이렇게 말하면 됩니다.

"아임웹 관리자 초대는 받은 것 같은데, 디자인 모드나 설정 메뉴가 보이지 않습니다. 운영진 그룹의 세부 접근 권한도 열려 있는지 확인 부탁드립니다."

이 한 문장을 알고 있으면 불필요한 시간을 꽤 줄일 수 있습니다.

디자인 모드에 들어가면 실제 홈페이지가 펼쳐집니다

이제 디자인 모드로 들어가 봅시다. 디자인 모드는 아임웹에서 실제 방문자가 보게 될 화면을 편집하는 핵심 공간입니다. 아임웹 공식 가이드에서도 페이지, 텍스트, 이미지, 버튼, 쇼핑, 게시판, 지도 같은 요소를 디자인 모드에서 추가하고 꾸밀 수 있다고 설명합니다.²

디자인 모드에 들어가면 템플릿으로 만들어진 사이트가 화면에 나타납니다. 처음 보는 사람에게는 그냥 완성된 홈페이지처럼 보이지만, 사실은 조립식 블록으로 구성된 편집 화면입니다. 텍스트 블록을 누르면 문구를 바꿀 수 있고, 이미지 영역을 누르면 사진을 교체할 수 있으며, 버튼을 누르면 글자와 연결 주소를 수정할 수 있습니다.

가장 먼저 할 일은 편집할 페이지를 선택하는 것입니다. 예를 들어 회사 홈페이지의 기본 메뉴가 다음과 같다고 해봅시다.

• 홈

• 회사소개

• 서비스

• 포트폴리오

• 고객지원

• 문의하기

디자인 모드에서 '회사소개'를 편집하고 싶다면 먼저 해당 페이지로 이동합니다. 그다음 화면 안의 문구, 이미지, 버튼을 하나씩 바꿉니다. 초보자가 흔히 하는 실수는 메인 페이지를 열어둔 상태에서 "왜 회사소개 문구가 안 보이지?" 하고 찾는 것입니다. 아임웹은 페이지별로 화면이 나뉘어 있으므로, 먼저 내가 수정하려는 페이지에 들어가야 합니다.

처음 연습할 때는 메인 페이지에서 다음 순서로만 해보세요.

1. 큰 제목 문구를 회사의 한 문장 소개로 바꿉니다.

2. 메인 이미지를 우리 업종에 맞는 이미지로 교체합니다.

3. 버튼 문구를 "문의하기", "상담 신청", "서비스 보기" 중 하나로 바꿉니다.

4. 버튼을 눌렀을 때 이동할 페이지를 문의하기 또는 서비스 페이지로 연결합니다.

5. 미리보기로 새 창에서 확인합니다.

이 다섯 단계만 해도 사이트는 이미 '남의 템플릿'에서 '우리 회사 홈페이지'로 바뀌기 시작합니다.

아임웹 화면은 레고처럼 나뉘어 있습니다

디자인 모드가 쉬워지는 순간은 화면 구조를 이해하는 순간입니다. 홈페이지는 통째로 하나의 그림처럼 보이지만, 실제로는 여러 단위가 차곡차곡 쌓여 있습니다. 초보자에게 가장 쉬운 비유는 레고입니다. 전체 건물이 페이지라면, 층은 섹션이고, 방은 행과 열이며, 책상이나 의자는 위젯입니다.

아임웹에서 자주 만나게 될 구조를 위에서 아래로 보면 이렇습니다.

여기서 가장 중요한 것은 섹션과 위젯입니다. 섹션은 페이지의 큰 덩어리입니다. 예를 들어 메인 페이지를 만든다면 보통 이런 식으로 섹션이 쌓입니다.

첫 번째 섹션은 방문자가 들어오자마자 보는 메인 비주얼입니다. 큰 이미지나 영상 배경 위에 회사의 핵심 문장과 버튼을 올립니다. 두 번째 섹션은 회사가 무엇을 하는지 간단히 설명합니다. 세 번째 섹션은 대표 서비스 세 가지를 카드 형태로 보여줍니다. 네 번째 섹션은 포트폴리오나 고객 사례를 보여줍니다. 마지막 섹션은 문의를 유도합니다.

위젯은 그 섹션 안에 들어가는 실제 재료입니다. 글을 넣고 싶으면 텍스트 위젯, 사진을 넣고 싶으면 이미지 위젯, 클릭할 행동을 만들고 싶으면 버튼 위젯을 씁니다. 지도를 보여주고 싶으면 지도 위젯, 공지사항 목록을 보여주고 싶으면 게시판 위젯, 상담 신청을 받고 싶으면 입력폼 위젯을 넣습니다.

이 구조를 이해하면 수정이 쉬워집니다. "홈페이지가 이상해요"가 아니라 "메인 페이지 두 번째 섹션의 오른쪽 텍스트 위젯을 수정해야겠어요"라고 말할 수 있게 됩니다. 이것이 초보자와 작업자의 차이입니다.

섹션을 먼저 보고, 위젯은 나중에 만지세요

초보자가 디자인 모드에서 가장 많이 저지르는 실수는 작은 글자부터 고치는 것입니다. 템플릿을 열자마자 문장 하나, 아이콘 하나, 버튼 색 하나를 붙잡고 오래 고민합니다. 그런데 프로처럼 보이는 홈페이지는 작은 요소보다 큰 구조가 먼저 안정되어 있습니다.

먼저 섹션을 봐야 합니다. 이 섹션이 꼭 필요한지, 순서가 자연스러운지, 배경이 너무 산만하지 않은지, 위아래 여백이 답답하거나 과하지 않은지 확인합니다. 섹션이 잘못되어 있으면 아무리 예쁜 버튼을 넣어도 어딘가 어설퍼 보입니다.

아임웹 공식 가이드에서도 섹션은 페이지를 상하로 나눈 구획이며, 섹션마다 배경 이미지나 효과를 다르게 줄 수 있고, 잘 나뉜 섹션은 콘텐츠의 가독성을 높인다고 설명합니다.³ 이것은 회사 홈페이지에서 특히 중요합니다. 방문자는 긴 글을 읽으러 온 것이 아니라 "이 회사가 믿을 만한가?"를 빠르게 판단하러 옵니다. 섹션이 명확하면 방문자는 정보를 훨씬 편하게 따라갑니다.

처음에는 빈 섹션을 직접 디자인하기보다, 이미 만들어진 섹션 템플릿을 추가한 뒤 문구와 이미지를 바꾸는 방식이 안전합니다. 예를 들어 서비스 소개 영역이 필요하다면 3개의 카드가 나란히 있는 섹션 템플릿을 선택합니다. 그다음 카드 제목을 우리 서비스명으로 바꾸고, 설명을 짧게 정리하고, 아이콘이나 이미지만 교체합니다.

처음부터 완전히 새로 만들려고 하면 오히려 비율이 무너집니다. 좋은 템플릿은 이미 여백, 정렬, 글자 크기, 이미지 비율이 어느 정도 잡혀 있습니다. 초보자의 목표는 템플릿을 파괴하는 것이 아니라, 템플릿의 질서를 유지하면서 우리 회사의 내용으로 바꾸는 것입니다.

위젯은 홈페이지의 문장, 사진, 버튼입니다

이제 위젯을 하나씩 익혀봅시다. 위젯은 디자인 모드에서 가장 자주 만지는 재료입니다. 모든 위젯을 한 번에 외울 필요는 없습니다. 회사 홈페이지를 만들 때 자주 쓰는 위젯부터 익히면 됩니다.

회사소개 페이지에는 텍스트와 이미지 위젯이 중심이 됩니다. 회사의 철학, 연혁, 팀 소개, 사무실 사진을 넣어야 하니까요. 서비스 페이지에는 텍스트, 이미지, 버튼이 함께 쓰입니다. 설명만 하는 것이 아니라 "이 서비스가 필요하다면 문의하세요"라는 다음 행동을 만들어야 하기 때문입니다. 문의하기 페이지에는 입력폼과 지도 위젯이 중요합니다. 방문자가 이름, 연락처, 문의 내용을 남기고, 필요하면 회사 위치까지 확인할 수 있어야 합니다.

게시판 위젯은 공지사항이나 자료실에 잘 어울립니다. 회사 소식을 계속 업데이트할 예정이라면 일반 페이지에 글을 하나씩 추가하기보다 게시판을 사용하는 편이 관리하기 쉽습니다. 예를 들어 '공지사항' 메뉴를 만들고 게시판을 연결해두면, 새 소식을 올릴 때마다 목록 형태로 정리됩니다.

코드 위젯은 조금 뒤로 미뤄도 됩니다. 코드 위젯은 HTML, CSS, JavaScript 같은 코드를 넣어 기본 기능으로 만들기 어려운 효과를 구현할 때 사용합니다. 예를 들어 마우스를 올렸을 때 이미지가 바뀌는 인트로 화면이나 특수한 애니메이션을 만들 때 활용할 수 있습니다.⁴ 하지만 이 책의 초반부에서는 코드 위젯을 필수로 다루지 않습니다. 회사 홈페이지는 코드보다 구조, 문구, 이미지, 문의 동선이 먼저입니다.

텍스트를 바꿀 때는 '예쁜 말'보다 '정확한 말'이 먼저입니다

디자인 모드에서 가장 먼저 바꾸게 되는 것은 대개 텍스트입니다. 템플릿에는 멋진 문장이 들어 있습니다. "새로운 가치를 만듭니다", "당신의 가능성을 확장합니다", "더 나은 내일을 설계합니다" 같은 문장들입니다. 보기에는 좋아도 문제는 방문자가 이해하기 어렵다는 것입니다.

회사 홈페이지의 텍스트는 멋있기 전에 분명해야 합니다. 첫 화면의 큰 제목은 회사가 무엇을 하는지 알려줘야 합니다. 예를 들어 "비즈니스의 미래를 만듭니다"보다 "중소기업을 위한 B2B 물류 관리 솔루션"이 훨씬 좋습니다. 조금 덜 화려해 보여도 방문자는 바로 이해합니다.

텍스트를 수정할 때는 다음 순서로 해보세요.

1. 텍스트 위젯을 클릭하거나 더블클릭합니다.

2. 기존 문구를 지우기 전에 어떤 역할의 문장인지 확인합니다.

3. 제목은 짧게, 설명은 두세 줄 안으로 바꿉니다.

4. 강조하고 싶은 단어만 굵게 처리합니다.

5. 문단 간격이 너무 붙거나 벌어지지 않았는지 확인합니다.

텍스트 위젯을 편집하다 보면 글자 크기, 굵기, 색상, 정렬을 바꾸고 싶어집니다. 여기서 조심해야 합니다. 초보자 티가 가장 많이 나는 화면은 글자 크기와 색상이 제각각인 화면입니다. 한 섹션 안에서 제목 크기, 본문 크기, 강조 색상은 최대한 통일하세요. 특히 회사 홈페이지에서는 빨강, 파랑, 초록, 보라를 한 화면에 모두 쓰는 순간 신뢰감이 떨어집니다.

처음에는 템플릿의 글자 스타일을 크게 바꾸지 말고 내용만 교체하는 것이 좋습니다. 디자인은 '더하는 기술'보다 '망치지 않는 기술'이 먼저입니다.

이미지는 분위기를 바꾸지만, 비율을 망가뜨리기도 합니다

홈페이지가 갑자기 프로처럼 보이는 순간은 대개 좋은 이미지를 넣었을 때입니다. 반대로 템플릿이 순식간에 어설퍼지는 순간도 이미지를 잘못 넣었을 때입니다. 이미지가 너무 흐리거나, 가로 사진 자리에 세로 사진을 억지로 넣거나, 얼굴이 잘리거나, 배경이 지나치게 복잡하면 전체 완성도가 떨어집니다.

이미지 위젯을 수정할 때는 먼저 이미지의 역할을 정하세요. 메인 화면의 이미지는 분위기를 만드는 이미지입니다. 회사소개 페이지의 이미지는 신뢰를 만드는 이미지입니다. 서비스 페이지의 이미지는 이해를 돕는 이미지입니다. 포트폴리오 이미지는 실력을 증명하는 이미지입니다.

이미지를 교체할 때는 다음을 확인합니다.

1. 기존 이미지가 가로형인지 세로형인지 확인합니다.

2. 새 이미지의 주인공이 중앙에 있는지 확인합니다.

3. 이미지 위에 글자가 올라간다면 배경이 너무 복잡하지 않은지 봅니다.

4. 어두운 배경에는 밝은 글자, 밝은 배경에는 어두운 글자를 씁니다.

5. PC에서는 괜찮아도 모바일에서 얼굴이나 제품이 잘리지 않는지 확인합니다.

회사 홈페이지에서는 무료 이미지도 사용할 수 있지만, 가능하다면 실제 회사 사진을 조금이라도 넣는 것이 좋습니다. 사무실 입구, 회의 장면, 제품 사용 장면, 작업 현장, 팀 사진은 방문자에게 "실제로 존재하는 회사"라는 감각을 줍니다. 다만 사진 품질이 너무 낮다면 메인 비주얼에는 쓰지 말고, 회사소개나 현장 스케치 영역에 작게 활용하는 편이 낫습니다.

버튼은 장식이 아니라 길 안내 표지판입니다

버튼은 홈페이지에서 가장 중요한 위젯 중 하나입니다. 버튼은 방문자에게 "다음에는 여기를 누르세요"라고 말하는 표지판입니다. 그런데 초보자는 버튼을 단순한 장식처럼 다루는 경우가 많습니다. 예쁜 색으로 만들어 놓고 어디로 연결할지 정하지 않거나, "MORE", "VIEW", "CLICK"처럼 의미가 약한 문구를 그대로 둡니다.

회사 홈페이지의 버튼 문구는 구체적이어야 합니다. "자세히 보기"도 나쁘지는 않지만, 더 좋은 문구가 많습니다. 서비스 페이지로 보내고 싶다면 "서비스 자세히 보기", 문의 페이지로 보내고 싶다면 "프로젝트 문의하기", 예약 기능이 있다면 "상담 일정 예약하기"처럼 행동을 분명히 적습니다.

버튼을 수정할 때는 세 가지를 함께 봅니다. 첫째, 버튼 문구입니다. 둘째, 버튼 링크입니다. 셋째, 버튼이 놓인 위치입니다. 메인 첫 화면에는 보통 가장 중요한 행동 버튼 하나가 있어야 합니다. 회사 홈페이지라면 "문의하기", "상담 신청", "회사소개 보기", "서비스 보기" 중 하나가 됩니다.

버튼 색상은 브랜드의 핵심 색상을 사용하는 것이 좋습니다. 단, 한 화면에 버튼 색상이 너무 많으면 안 됩니다. 주 버튼은 진하게, 보조 버튼은 테두리형이나 연한 색으로 구분하면 깔끔합니다. 예를 들어 "문의하기"는 진한 파란색 버튼으로, "회사소개 보기"는 흰색 바탕에 파란색 테두리 버튼으로 만들 수 있습니다.

그리드와 정렬이 프로 느낌을 만듭니다

디자인을 모르는 사람이 만든 홈페이지는 대개 내용이 나빠서가 아니라 정렬이 흐트러져서 어설퍼 보입니다. 카드 세 개의 높이가 다르고, 이미지 크기가 제각각이고, 버튼 위치가 조금씩 어긋나 있고, 섹션마다 여백이 들쭉날쭉합니다. 방문자는 이유를 정확히 말하지 못해도 "뭔가 허술하다"고 느낍니다.

아임웹의 그리드 시스템은 이런 문제를 줄여주는 장치입니다. 그리드는 위젯을 반듯하게 배치하기 위한 보이지 않는 기준선입니다. 공식 가이드에서도 그리드 시스템은 위젯을 아름답게 배치하고 반응형 디자인의 핵심이 되는 요소로 설명됩니다.⁵

초보자는 그리드를 어렵게 생각하지 않아도 됩니다. 일단 다음 원칙만 기억하세요. 같은 성격의 요소는 같은 크기와 같은 간격으로 배치합니다. 서비스 세 가지를 보여줄 때는 카드 세 개의 폭을 같게 합니다. 포트폴리오 여섯 개를 보여줄 때는 이미지 비율을 맞춥니다. 제목과 본문은 왼쪽 정렬이면 모두 왼쪽 정렬, 가운데 정렬이면 모두 가운데 정렬로 통일합니다.

정렬을 확인하는 쉬운 방법이 있습니다. 화면을 조금 뒤로 물러나서 보세요. 글을 읽지 말고 덩어리만 봅니다. 왼쪽 선이 맞는지, 카드 간격이 같은지, 위아래 여백이 일정한지 봅니다. 이때 삐뚤어진 부분이 보이면 그곳이 수정할 부분입니다.

프로처럼 보이는 홈페이지는 특별한 효과가 많아서가 아니라, 기본 정렬이 안정적입니다.

여백은 빈 공간이 아니라 숨 쉴 공간입니다

초보자는 여백을 무서워합니다. 빈 공간이 보이면 뭔가 더 넣어야 할 것 같습니다. 회사 연혁도 넣고, 인증서도 넣고, 대표 인사말도 넣고, 서비스 설명도 넣고, 고객사 로고도 넣고 싶어집니다. 하지만 홈페이지에서 여백은 낭비가 아닙니다. 여백은 방문자가 정보를 이해할 수 있게 해주는 숨 쉴 공간입니다.

섹션 위아래 여백이 너무 좁으면 답답해 보입니다. 반대로 여백이 너무 크면 내용이 흩어져 보입니다. 템플릿을 사용할 때는 기본 여백이 어느 정도 잡혀 있으므로, 처음에는 크게 건드리지 않는 것이 좋습니다. 다만 문구를 줄였더니 섹션이 지나치게 비어 보이거나, 이미지를 바꿨더니 위아래가 답답해졌다면 섹션 설정에서 여백을 조정합니다.

회사 홈페이지에서 자주 쓰는 여백 감각은 이렇습니다. 첫 화면은 넉넉해야 합니다. 방문자가 처음 들어왔을 때 브랜드의 분위기를 느껴야 하기 때문입니다. 서비스 카드 영역은 너무 넓지 않아야 합니다. 한눈에 비교되어야 하기 때문입니다. 문의 유도 영역은 명확해야 합니다. 문장과 버튼 사이에 적당한 간격을 두어 버튼이 잘 보여야 합니다.

여백을 조정할 때는 한 번에 크게 바꾸지 말고 조금씩 바꾸세요. 10픽셀, 20픽셀 차이만으로도 인상이 달라집니다. 디자인은 망치질이 아니라 미세 조정에 가깝습니다.

상단 메뉴와 하단 정보도 디자인의 일부입니다

많은 사람이 본문 화면만 홈페이지 디자인이라고 생각합니다. 하지만 방문자는 상단 메뉴와 하단 정보에서도 회사의 신뢰도를 판단합니다. 상단 메뉴가 복잡하면 사이트가 복잡해 보이고, 하단 정보가 비어 있으면 회사가 덜 믿음직해 보입니다.

상단 메뉴에서는 메뉴 개수를 너무 늘리지 않는 것이 좋습니다. 3장에서 정리한 것처럼 회사 홈페이지의 기본 메뉴는 홈, 회사소개, 서비스, 포트폴리오 또는 고객사례, 고객지원, 문의하기 정도면 충분합니다. 메뉴명은 짧고 익숙해야 합니다. "Our Business Experience"보다 "서비스"가 낫고, "Contact Point"보다 "문의하기"가 낫습니다.

상단 메뉴에서 확인할 것은 로고, 메뉴 정렬, 버튼, 고정 여부입니다. 고정 메뉴는 스크롤을 내려도 상단에 메뉴가 따라오는 설정을 말합니다. 긴 페이지에서는 고정 메뉴가 도움이 됩니다. 방문자가 아래까지 읽다가도 바로 문의하기로 이동할 수 있기 때문입니다. 다만 고정 메뉴의 높이가 너무 크면 모바일에서 화면을 많이 가리므로 주의해야 합니다.

하단에는 회사의 기본 정보가 들어갑니다. 아임웹 가이드에서도 웹 페이지 하단에는 상호, 대표자명, 연락처, 주소 등의 사업자 정보를 표시할 수 있고, 필요에 따라 호스팅 제공자, 에스크로 인증마크, SNS 링크나 버튼 등을 표시할 수 있다고 안내합니다.⁶ 회사 홈페이지라면 최소한 회사명, 대표 연락처, 이메일, 주소, 사업자등록번호, 개인정보처리방침 링크 정도는 정리해두는 것이 좋습니다.

하단은 모든 페이지의 마지막 인상입니다. 화려할 필요는 없지만 비어 있으면 안 됩니다.

저장, 미리보기, 게시를 헷갈리지 마세요

아임웹을 처음 만지는 사람이 가장 무서워하는 순간은 저장 버튼을 누를 때입니다. "이걸 누르면 바로 고객에게 보이는 건가?"라는 걱정이 듭니다. 그래서 작업이 끝났는데도 저장을 미루거나, 반대로 미리 확인하지 않고 바로 공개해버리기도 합니다.

여기서 세 단어를 구분해야 합니다. 저장은 내가 디자인 모드에서 수정한 작업을 보관하는 것입니다. 미리보기는 실제 방문자 화면에 가깝게 새 창에서 확인하는 것입니다. 게시 또는 발행은 방문자가 볼 수 있도록 웹에 반영하는 단계입니다. 아임웹 공식 빠른 시작 가이드에서도 작업물을 새 브라우저 탭에서 미리 본 뒤, 문제가 없다면 실제 방문자가 볼 수 있도록 게시하는 흐름을 안내합니다.⁷

작업할 때는 다음 습관을 들이세요.

1. 작은 수정 후 저장합니다.

2. 한 섹션을 고친 뒤 미리보기로 확인합니다.

3. PC 화면에서 문제가 없으면 태블릿과 모바일 화면을 확인합니다.

4. 링크와 버튼을 직접 눌러봅니다.

5. 마지막에 게시 또는 발행합니다.

실수했을 때도 당황하지 않는 습관이 중요합니다. 큰 수정을 하기 전에는 현재 화면을 미리보기로 열어두거나 스크린샷을 찍어두세요. 특히 메인 페이지 첫 화면, 문의 페이지, 서비스 페이지처럼 중요한 곳을 고치기 전에는 기존 상태를 따로 확인할 수 있게 해두면 마음이 편합니다.

무엇보다 한 번에 너무 많은 것을 바꾸지 마세요. 텍스트, 이미지, 여백, 버튼, 배경을 한꺼번에 바꾸면 무엇 때문에 화면이 이상해졌는지 알기 어렵습니다. 프로는 빠르게 고치는 사람이 아니라, 되돌릴 수 있게 고치는 사람입니다.

PC에서 끝났다고 끝난 게 아닙니다

회사 홈페이지를 만들 때 작업은 대개 PC에서 합니다. 넓은 화면으로 보면 섹션도 시원하고, 이미지도 멋지고, 버튼도 적당해 보입니다. 그런데 실제 방문자는 모바일로 들어오는 경우가 많습니다. 특히 검색, SNS, 카카오톡 링크를 통해 들어오는 방문자는 스마트폰에서 홈페이지를 봅니다.

아임웹은 반응형 제작을 지원합니다. 반응형이란 화면 크기에 맞게 레이아웃이 자동으로 조정되는 방식을 말합니다. 하지만 자동으로 조정된다고 해서 모든 것이 완벽하다는 뜻은 아닙니다. PC에서 가로로 나란히 있던 카드 세 개가 모바일에서는 세로로 쌓입니다. 긴 제목은 두 줄이나 세 줄로 바뀝니다. 이미지의 양옆이 잘리기도 하고, 버튼이 너무 작아 보이기도 합니다.

그래서 PC 화면에서 레이아웃을 완성한 뒤에는 반드시 태블릿과 모바일 화면을 확인해야 합니다. 특히 다음 부분을 집중해서 보세요.

• 제목 줄바꿈이 어색하지 않은가

• 이미지에서 중요한 얼굴, 제품, 로고가 잘리지 않는가

• 버튼이 손가락으로 누르기 충분한 크기인가

• 섹션 위아래 여백이 모바일에서 너무 크거나 좁지 않은가

• 여러 위젯이 쌓이는 순서가 자연스러운가

• 상단 메뉴가 모바일에서 잘 열리고 닫히는가

모바일에서 가장 흔한 문제는 제목이 너무 길어지는 것입니다. PC에서는 한 줄이던 문장이 모바일에서는 네 줄이 될 수 있습니다. 이럴 때는 문장 자체를 줄이는 것이 좋습니다. "고객의 비즈니스 성장을 위한 통합 디지털 전환 솔루션을 제공합니다"보다 "비즈니스 성장을 돕는 디지털 솔루션"이 모바일에 훨씬 잘 맞습니다.

또 하나의 문제는 이미지 잘림입니다. 메인 이미지에 사람이 오른쪽에 서 있는데 모바일에서 오른쪽이 잘리면 얼굴이 사라질 수 있습니다. 이럴 때는 이미지의 초점을 중앙으로 바꾸거나, 모바일용 이미지를 따로 조정해야 합니다.

PC에서 멋진 홈페이지보다 더 중요한 것은 모바일에서도 읽히는 홈페이지입니다.

실습: 메인 첫 화면을 직접 고쳐보기

이제 손을 움직여봅시다. 이번 실습의 목표는 메인 페이지 첫 화면을 우리 회사에 맞게 바꾸는 것입니다. 첫 화면은 방문자가 홈페이지에 들어오자마자 보는 영역입니다. 이곳에서 회사가 무엇을 하는지, 어떤 행동을 하면 되는지 바로 알 수 있어야 합니다.

먼저 디자인 모드에서 홈 페이지를 엽니다. 템플릿의 첫 번째 섹션을 찾습니다. 대개 큰 배경 이미지, 큰 제목, 짧은 설명, 버튼으로 구성되어 있을 것입니다.

큰 제목을 클릭해 우리 회사를 한 문장으로 설명합니다. 예를 들어 제조 설비 유지보수 회사라면 "공장 설비의 멈춤을 줄이는 유지보수 파트너"라고 쓸 수 있습니다. 세무 법인이라면 "사업자의 세금 고민을 줄이는 실무형 세무 파트너"라고 쓸 수 있습니다. 인테리어 회사라면 "브랜드의 첫인상을 설계하는 상업 공간 인테리어"라고 쓸 수 있습니다.

그다음 설명 문구를 바꿉니다. 설명은 너무 길지 않게 씁니다. "견적부터 시공, 사후관리까지 한 번에 진행합니다"처럼 방문자가 궁금해할 핵심을 담으면 됩니다.

이제 버튼을 바꿉니다. 버튼 문구는 "문의하기"보다 조금 더 구체적으로 쓰면 좋습니다. "프로젝트 문의하기", "무료 상담 신청", "서비스 살펴보기"처럼 행동이 보이게 만듭니다. 버튼 링크는 문의하기 페이지나 서비스 페이지로 연결합니다.

마지막으로 이미지를 바꿉니다. 아직 회사 사진이 없다면 업종 분위기에 맞는 이미지를 임시로 사용할 수 있습니다. 하지만 최종 공개 전에는 가능하면 실제 사진이나 브랜드에 맞는 이미지로 교체하세요. 메인 이미지는 홈페이지의 옷차림입니다. 아무리 좋은 말을 써도 이미지가 어울리지 않으면 신뢰감이 떨어집니다.

수정이 끝나면 저장하고 미리보기를 엽니다. 새 창에서 첫 화면만 보지 말고, 버튼을 눌러 실제로 이동하는지 확인합니다. PC에서 확인한 뒤 모바일 화면도 확인합니다. 제목이 너무 길게 줄바꿈되지 않는지, 버튼이 잘 보이는지, 이미지가 잘리지 않는지 봅니다.

이 실습을 마치면 여러분은 이미 디자인 모드의 핵심 흐름을 한 번 경험한 것입니다. 페이지 선택, 텍스트 수정, 이미지 교체, 버튼 연결, 저장, 미리보기, 모바일 확인. 앞으로 어떤 페이지를 만들든 이 흐름이 반복됩니다.

실습: 문의하기 페이지의 기본 골격 만들기

회사 홈페이지에서 문의하기 페이지는 단순한 연락처 페이지가 아닙니다. 방문자를 고객으로 바꾸는 마지막 문입니다. 이 페이지가 불편하면 앞에서 아무리 좋은 소개를 해도 문의가 줄어듭니다.

디자인 모드에서 문의하기 페이지를 엽니다. 아직 페이지가 없다면 페이지/메뉴 관리에서 새 페이지를 만들고 메뉴에 추가합니다. 문의하기 페이지에는 보통 세 가지 요소가 필요합니다. 안내 문구, 입력폼, 회사 정보 또는 지도입니다.

첫 번째 섹션에는 짧은 안내 문구를 넣습니다. 예를 들어 "프로젝트 내용을 남겨주시면 담당자가 확인 후 연락드리겠습니다"라고 쓸 수 있습니다. 너무 딱딱하게 "문의사항을 입력하십시오"라고 쓰기보다, 방문자가 무엇을 기대할 수 있는지 알려주는 문장이 좋습니다.

두 번째 영역에는 입력폼 위젯을 넣습니다. 회사 홈페이지에서 기본적으로 받을 항목은 이름, 연락처, 이메일, 문의 유형, 문의 내용 정도입니다. 너무 많은 정보를 요구하면 방문자가 이탈할 수 있습니다. 처음부터 회사명, 직함, 예산, 일정, 주소, 첨부파일까지 모두 요구하면 부담스럽습니다. 꼭 필요한 항목만 먼저 받는 것이 좋습니다.

세 번째 영역에는 지도 위젯이나 회사 정보를 넣습니다. 방문 상담이 중요한 업종이라면 지도가 유용합니다. 온라인 상담 중심이라면 이메일, 전화번호, 운영시간을 더 잘 보이게 배치해도 됩니다.

문의하기 페이지를 만든 뒤에는 반드시 직접 테스트해야 합니다. 입력폼에 테스트 문의를 남겨보고, 관리자 화면에서 제대로 확인되는지 봅니다. 알림 메일을 설정했다면 담당자에게 메일이 도착하는지도 확인합니다. 버튼은 보이는데 실제 문의가 도착하지 않는 홈페이지는 문은 있는데 초인종이 고장 난 사무실과 같습니다.

실습: 공지사항을 게시판으로 연결하기

회사 홈페이지에는 종종 공지사항, 자료실, 뉴스 메뉴가 필요합니다. 이런 콘텐츠는 일반 페이지에 매번 새 섹션을 추가하는 것보다 게시판으로 관리하는 편이 좋습니다. 게시판은 글을 목록으로 쌓고, 날짜와 제목을 기준으로 정리할 수 있기 때문입니다.

먼저 관리자 화면에서 게시판 메뉴를 찾습니다. 공지사항용 게시판을 만들고 기본 설정을 확인합니다. 그다음 디자인 모드에서 공지사항 페이지를 열고 게시판 위젯을 배치합니다. 게시판 위젯을 통해 해당 게시판의 글 목록이 페이지에 보이도록 연결합니다.

공지사항 게시판을 만들 때는 첫 글을 꼭 올려두세요. "홈페이지를 오픈했습니다" 같은 간단한 글이어도 괜찮습니다. 빈 게시판은 방문자에게 관리되지 않는 느낌을 줍니다. 반대로 짧은 글 하나라도 있으면 사이트가 살아 있는 느낌을 줍니다.

자료실이라면 다운로드 파일을 정리할 수 있고, 뉴스라면 회사 소식이나 프로젝트 소식을 올릴 수 있습니다. 중요한 것은 꾸준히 관리할 수 있는 메뉴만 만드는 것입니다. "언젠가 쓰겠지" 하고 만든 빈 게시판은 차라리 없는 편이 낫습니다.

오늘 익힌 것만으로도 수정은 훨씬 쉬워집니다

이번 장에서 우리는 아임웹의 관리자 화면과 디자인 모드, 그리고 섹션과 위젯의 기본 구조를 익혔습니다. 아직 모든 기능을 알 필요는 없습니다. 지금 단계에서 중요한 것은 전체 지도를 머릿속에 넣는 것입니다.

관리자 화면은 사이트를 운영하는 조종실입니다. 디자인 모드는 방문자가 보게 될 화면을 직접 편집하는 작업 공간입니다. 페이지는 여러 섹션으로 나뉘고, 섹션 안에는 텍스트, 이미지, 버튼, 지도, 게시판, 입력폼 같은 위젯이 들어갑니다. 프로처럼 보이는 화면은 대단한 효과보다 안정적인 여백, 정렬, 그리드, 이미지 비율에서 나옵니다.

앞으로 페이지를 만들다가 막히면 이렇게 질문해보세요.

"나는 지금 어느 페이지를 고치고 있지?"

"이 부분은 섹션 문제일까, 위젯 문제일까?"

"방문자가 다음에 눌러야 할 버튼이 보이나?"

"모바일에서도 같은 흐름으로 읽히나?"

이 질문들만으로도 작업의 절반은 정리됩니다. 다음 장에서는 이제 한 단계 더 들어갑니다. 단순히 템플릿을 수정하는 것을 넘어, 우리 회사의 색, 글자, 이미지, 분위기를 어떻게 맞춰야 브랜드가 살아나는지 알아볼 것입니다. 홈페이지는 기능만으로 완성되지 않습니다. 방문자가 "이 회사답다"고 느끼는 순간, 비로소 회사 홈페이지가 됩니다.

참고

¹아임웹 관리자 admin 권한 관련 참고 글

²아임웹 빠른 디자인 시작 가이드

³아임웹 빠른 디자인 시작 가이드

⁴아임웹 코드위젯 인트로 페이지 구성 예시

⁵아임웹 빠른 디자인 시작 가이드

⁶아임웹 빠른 디자인 시작 가이드

⁷아임웹 빠른 디자인 시작 가이드