언젠가 인터뷰에서 한 브랜드 대표님이 이런 말을 해주신 적이 있어요.

“맨날 쓰는 것만 쓰다 보니 아임웹 기능을 20%도 제대로 못 쓰는 것 같아요. 😢”

이런 고객님들을 위해 아임웹팀은 사용 가이드와 콘텐츠를 더 열심히, 더 꼼꼼하게 전해드리고자 항상 노력하는데요. 이번에는 대표적인 아임웹 웹사이트 제작 전문가 3인을 모시고, 디자인모드 200% 활용법 인터뷰를 진행했어요. 오랜 시간 아임웹을 통해 퀄리티 높은 웹사이트 작업을 해온 진짜 전문가의 생생한 팁과 실제 제작 과정까지! 웹사이트 퀄리티를 높이고 싶다면 놓치지 말고 꼭 전문을 읽어주세요. 😊

전문가 3인이 말하는 아임웹 디자인모드

Q. 아임웹 디자인모드의 가장 큰 강점은 무엇인가요?

스러운스튜디오 🌿  가장 눈에 띄는 강점은 직관적인 디자인 시스템입니다. 디자인 모드 하나만으로 디자인뿐만 아니라 게시판, 갤러리 같은 데이터베이스(DB) 요소까지 한번에 관리할 수 있어요. 개발자가 아닌 분들, 초보자분들이 작업할 때 특히 유용해요.

누끼토끼 🐰  역시 직관적인 사용성을 꼽고 싶습니다.  PC와 모바일 뷰포트* 전환을 통해 특정 섹션을 추가하고 변형하며 간편하게 디자인 작업을 진행할 수 있습니다. 또한 마우스로 끌어다 놓기만 하면 만들 수 있는 드래그앤드롭 방식, 그리드 시스템**으로 누구나 학습에 큰 시간을 들이지 않아도 손쉽게 웹사이트를 제작할 수 있어요.

*뷰포트(viewport): 현재 화면에 보여지는 (보통 직사각형의) 영역

**그리드 시스템(Grid System): 그리드(Grid)는 '격자무늬' 또는 '격자판'을 의미하며, 격자 선에 맞춰 디자인에 규칙을 부여하여 페이지를 더 보기 좋고, 알기 쉽게 제작할 수 있도록 도움을 주는 디자인 시스템입니다. 아임웹은 초보자도 쉽고, 간편하게, 아름다운 웹 디자인이 가능하도록 12-그리드 시스템을 사용합니다.

픽셀아트공작소 👾  다른 웹사이트 빌더와 비교했을 때, 디자인적으로 응용할 수 있는 요소가 풍부하다고 생각합니다. 외부 코드(CSS, 제이쿼리)를 붙이는 작업도 다른 웹사이트 빌더보다 적용이 쉬워 확장성이 뛰어납니다. 블로그를 써본 경험이 있다면 누구나 할 수 있을 정도로 직관적인 인터페이스도 당연히 큰 강점이고요.

Q. 업종별로 특히 유용하게 사용하는 기능이 있을까요?

누끼토끼 🐰 쇼핑과 예약 기능을 가장 잘 활용하고 있어요. 쇼핑, 주문/결제, 재고 관리 기능 등을 이용하면 전문 기술이 없어도 바로 쇼핑몰 구축이 가능하거든요. 미용실이나 병원, 스튜디오 등 예약 중심 업종의 웹사이트도 많이 작업하는데요. 이때는 캘린더 위젯을 활용하면 고객이 원하는 시간을 선택할 수 있는 시스템을 쉽게 구현할 수 있습니다.

픽셀아트공작소 👾 쇼핑 기능에 더해, 강의/전자책 등 디지털 상품 판매 기능을 잘 활용하고 있습니다. 회원 전용 콘텐츠 설정, 온라인 결제 기능, 게시판 및 상품 열람 권한 설정이 가능해서 디지털 콘텐츠 제공과 판매에 적합해요. 그 외 갤러리(특히 슬라이드 기능), 메뉴 리스트, 배경 이미지 고정, 각 위젯의 애니메이션 기능, 입력폼(문의하기) 기능은 업종에 관계 없이 정말 많이 사용하는 것 같아요.

스러운스튜디오 🌿 회사/브랜드가 어떤 강점을 가졌는지, 어떤 상황인지에 따라 주로 사용하는 기능이 달라지는데요. 예를 들어 이미지와 비주얼이 중요한 브랜드는 ‘갤러리 위젯’을 활용하면 간단한 세팅만으로도 감각적인 디자인을 보여줄 수 있어요. 이미지에 각기 다른 외부 링크를 삽입할 수 있는 점도 좋습니다. 주기적으로 콘텐츠를 업로드하는 브랜드라면 ‘게시판 위젯’이 유용합니다. 초기 세팅도 쉽고, 추후에도 고객사가 블로그 작성하듯 스스로 업로드 할 수 있다는 점에서 만족도가 높습니다. 그 외 일반적인 회사 소개 웹사이트는 ‘카테고리 위젯’을 사용하여 하위 메뉴를 깔끔하게 구성하는 방식을 많이 활용합니다.

전문가들은 실제로 어떻게 웹사이트를 만들까?

Q. 가장 기억에 남는 웹사이트 구축 사례와 그 과정이 궁금합니다.

스러운스튜디오 🌿 '29역숏폼왕' 프로젝트 사례를 말씀드리고 싶습니다. 최근 숏폼 트렌드에 발맞춰, 한국경제신문사에서 신규 영상 공모전 서비스를 론칭하는 프로젝트였어요. 핵심 과업은 서비스의 가치를 효과적으로 전달하고, 참여를 원하는 기업의 문의를 많이 받을 수 있는 웹사이트를 구성하는 것이었습니다.

저희는 문의를 받아야 하는 잠재 고객 ‘기업 마케팅 부서’의 의사결정 프로세스를 고려하여 페이지를 구성했어요. 먼저 첫 화면에서 29역 숏폼왕의 서비스를 한눈에 설명하고, 다음으로 이 서비스가 효과적임을 뒷받침해 주는 지표와 숫자를 배치했습니다. 이후 마케팅 담당자들의 예상 고민, 이를 해결해줄 수 있는 우리만의 장점, 진행 프로세스, 그리고 문의 폼(form) 순서로 고객이 설득될 수 있도록 체계적으로 유도했어요.

원페이지 형식인 데다가, 생소한 서비스를 설명하면서 문의를 받을 수 있도록 설득까지 해야 하는 점이 매우 까다로웠는데요. 정보 전달의 효율성을 높이기 위해 블랙/옐로우의 포인트 컬러를 전략적으로 배치하고, 사용자 경험 최적화를 위해 '한 섹션에는 한 가지 메시지만' 원칙을 철저히 준수했습니다. 또한 많은 양의 텍스트와 이미지를 안정적인 레이아웃으로 보여주기 위해 아임웹의 12그리드 시스템을 기준으로 삼아 작업했습니다.

누끼토끼 🐰  롯데 한국후지필름의 '스튜디오 상(象)' 웹사이트 제작 프로젝트가 기억에 남아요. 브랜드 컨셉이 고급스러운(High end) 포토 스튜디오였기 때문에, 웹사이트 내 영상 및 사진 콘텐츠가 매력적으로 돋보이도록 구성하는 것이 가장 중요했습니다. 그런데 아임웹 기본 업로드 기능으로 영상을 업로드하면, 3~5초 정도의 딜레이가 발생하는 문제가 있었어요. 평소에는 큰 문제가 아니지만, 이 브랜드에서는 다른 무엇보다 영상 퀄리티가 중요했기 때문에 꼭 해결해야 하는 문제였습니다.

이 부분은 작은 아이디어를 통해 창의적으로 해결할 수 있었는데요. 우선 영상을 초당 프레임으로 분할한 뒤, 첫 번째 프레임을 썸네일로 설정했습니다. 그리고 영상이 로드되는 시간 동안 해당 썸네일에 애니메이션 줌아웃 효과를 적용했어요. 결과적으로 웹사이트 방문자 입장에서는 영상이 바로 재생되지 않더라도, 그 멈춰있는 시간을 느끼기 어렵게 만들었습니다. 부족했던 부분을 애니메이션 효과로 보완했더니, 오히려 더 자연스럽고 고급스럽게 느껴졌다는 긍정적인 피드백을 받을 수 있었어요.

픽셀아트공작소 👾  저는 ‘로터스코리아’ 웹사이트 제작 프로젝트에서 브랜드의 역동적이고 강렬한 이미지를 구현해야 했는데요. 관건은 촉박한 제작 기간, 그리고 유지보수의 편리함이 보장되어야 한다는 것이었어요. 저는 특히 유지보수를 위해 아임웹 활용을 적극 제안했습니다. 처음에는 고객사에서 아임웹으로 역동적인 비주얼을 구현할 수 있을지 우려하기도 했지만, 그 역시 충분히 가능하다는 점을 어필했어요.

이를 위해 아임웹의 기본 애니메이션 효과에 일부 추가 코드를 결합했고, 완성도 높은 강렬한 비주얼의 영상을 삽입했습니다. 그 결과 유지보수의 효율성과 비용 절감뿐만 아니라 고객사가 원하는 수준의 감각적이고 다이나믹한 웹사이트를 만들 수 있었어요. 이후 고객사 측에서도 ‘기간이 촉박해서 걱정이 많았지만, 아임웹으로 제작해서 일정 안에 빠르게 제작하면서도 좋은 퀄리티로 나올 수 있었던 것 같다’라고 평가해 주셔서 매우 뿌듯했습니다.

간단하지만 디자인 퀄리티를 확 높여주는 실전 꿀팁은?

Q. 확실하게 도움되는 디자인모드 팁을 몇 가지 알려주실 수 있을까요?

누끼토끼 🐰  고객사 분들을 만나보면, 디자인모드 기본 기능의 50%도 제대로 활용하지 못하는 경우가 생각보다 많습니다. 기본 기능을 충분히 이해하고 활용하는 것이 디자인모드를 효율적으로 사용하는 첫걸음일 텐데요. 아임웹 가이드, 그리고 최근 오픈한 AI 기술 상담사 ‘비비’를 활용하시면 큰 도움이 될 거예요.

그렇다고 무턱대고 가이드만 읽지는 말고, 실제 디자인모드에서 단계별로 가벼운 탐색을 시작해 보세요. 처음부터 모든 기능을 완벽하게 숙지하고 만들 수는 없어요. 크게 상단 - 본문 - 하단의 순서로 각각 어떤 위젯이 있고, 어떤 기능과 옵션값들이 제공되는지 차근차근 살펴보며 직접 시도해 보세요. 다양한 위젯과 옵션을 실험하고 연습하면서 손에 익히는 과정이 필요합니다.

픽셀아트공작소 👾  웹디자인은 그리드만 잘 맞추어도 퀄리티가 대폭 상승합니다. 위젯의 위치 및 좌우 간격을 일정하게 유지하는 것에 신경 써주세요. 섹션 간 여백만 동일하게 유지해도 훨씬 깔끔하고 세련되어 보입니다. 한 가지 더, 텍스트의 모든 내용을 강조하려고 하지 마세요. 제목과 부제목을 붙이고 적당한 강약을 주는 것만으로도 훨씬 가독성 높은 웹사이트를 만들 수 있거든요. 텍스트 위젯 내 ‘단락’ 기능을 활용하는 것을 추천드려요.

스러운스튜디오 🌿 레이아웃 설정은 가장 큰 단위에서부터 진행하세요. 웹사이트 안에 다양한 페이지와 레이아웃이 존재하지만, 그럼에도 어느 정도 일관성을 가져가는 것이 좋은 웹디자인이라 생각합니다. 가장 큰 단위의 설정은 공통설정 > 섹션별 여백설정 > 그 안에 배치될 위젯의 여백의 수치를 조정하는 순서로 작업해 보세요. 이러한 단계별 접근으로 체계적이고 효율적인 작업이 가능합니다.

그리고 아임웹의 12그리드 시스템을 적극적으로 활용하셨으면 좋겠습니다. 저희의 경우 디자인의 완성도를 높이기 위해, 웹디자인 툴인 피그마(figma) 작업부터 12그리드를 적용해두고 있습니다. 피그마에서부터 아임웹 화면을 고려하며 작업하니, 저희가 의도한 디자인 대로 아임웹에서도 동일하게 구현할 수 있다는 장점이 있어요.

Q. 아임웹 디자인모드로 혼자서도 멋진 웹사이트를 만들 수 있지만, 세 분과 같은 전문가의 도움이 필요할 때도 있습니다. 어떤 상황에서 전문가의 도움을 받는 것이 좋을까요?

픽셀아트공작소 👾  사실 디자인모드와 같은 정말 직관적이고 쉬운 툴을 쓰더라도, 누구나 바로 ‘예쁘다’고 느낄 정도의 퀄리티로, 내 브랜드의 정체성을 100% 살리는 맞춤형 디자인을 하는 것은 쉽지 않습니다. 그러려면 아임웹을 정말 많이 사용해 본 경험이 있어야 하고, 웹디자인 체계나 기본적인 CSS에 대한 공부가 어느 정도 필요하죠. 이런 문제들을 빠르게 해결해 주는 것이 전문가의 역할이라고 생각해요. 누구보다 아임웹 기능을 깊이 이해하고, 기능적인 한계를 우회하여 원하는 바를 실현할 수 있는 노하우가 있으니까요.

누끼토끼 🐰  아임웹은 직관적인 인터페이스와 간편한 사용성을 바탕으로 초보자도 쉽게 웹사이트를 제작할 수 있는 강력한 도구예요. 하지만 브레이크포인트* 부족, 제한된 애니메이션 옵션, 자동화 도구와의 연동 부재 등 기능적 제약도 존재하죠. 이러한 문제는 HTML, CSS, JS 이해도가 높은 아임웹 전문가를 통해 도움을 받아 해결할 수 있습니다. 다양한 요구 사항에 대응할 수 있는 전문가와 함께 보다 폭넓은 웹사이트 제작이 가능해요.

*브레이크포인트: PC, 모바일 등 다양한 디바이스와 화면 크기에 대응하기 위해 레이아웃이나 스타일을 변경하는 지점

스러운스튜디오 🌿  디자인모드로도 충분히 멋진 웹사이트를 만들 수 있지만, 보다 전략적인 접근이 필요할 때가 있습니다. 예를 들어 방문자의 행동 패턴을 분석하고 전환율을 고려한 UI/UX 설계가 필요하거나, 아임웹 기본 기능으로는 구현하기 어려운 맞춤 기능이 필요한 경우입니다. 실제로 많은 고객님들이 문의 폼 데이터를 활용한 실시간 참여자 수 표시나, 외부 서버 연동과 같은 커스텀 작업을 요청하시는데요. 이러한 요구사항들을 전문가의 지식과 노하우로 빠르게 해결하여, 기본 기능 이상의 만족스러운 결과물을 만들어낼 수 있습니다.