로운의 아임웹 제작 절차와 기획 방법
episod of Planet - ‘LOUN’ 행성 탐험 에피소드
우주 속 행성을 탐험하듯, 로운이 탐험한 브랜드와 우리가 만들어낸 결과물의 이야기를 만나보세요.
로운의 아임웹 제작 절차와 기획 방법
Head Director 이동민
로운은 어떻게 웹을 제작할까?
오늘은 로운의 아임웹 제작 절차와 기획 방법에 대해 이야기해 보려 합니다.
요즘은 누구나 손쉽게 웹을 만들 수 있는 시대지만, “기획과 디자인 없이 빠르게 만든 웹이 과연 제대로 된 웹일까?” 이 질문에 대한 답을 찾기 위해 로운이 어떤 과정을 거쳐 웹을 제작하고 있는지를 Head Director 이동민 님과 함께 살펴봅니다.
Q. 로운은 노코드 솔루션과 개발 중 어떤 방식으로 웹을 구축하나요?
이동민 저희는 두 가지 방법을 모두 활용합니다. 최근에는 아임웹을 중심으로 한 노코드 솔루션 제작 의뢰가 빠르게 늘어나면서 주로 아임웹 기반으로 프로젝트를 진행하고 있습니다.
Q. 최근 아임웹이나 프레이머 같은 솔루션 수요가 급증한 이유는 뭘까요?
이동민 제가 느끼기엔 두 가지 이유가 있습니다. 첫 번째로는, 솔루션의 발전이에요. 예전엔 솔루션 특유의 단조로운 디자인과 기능 제한 때문에 퀄리티 높은 웹을 만들기 어렵다는 인식이 있었지만, 이제는 디자인 자유도도 높고, 기능 연결도 훨씬 쉬워졌습니다. 덕분에 사내 인력만으로 콘텐츠 수정이나 기능 추가가 가능해졌죠. 그래서 기존에 개발로 구축된 웹을 아임웹으로 이전·운영하려는 기업도 늘고 있습니다. 두 번째로는, 창업 환경의 변화입니다. 브랜드를 만드는 장벽이 낮아지고 창업 기회가 많아지면서 자연스럽게 웹 제작 수요도 함께 커졌다고 생각합니다.
Q. 아임웹 기준으로 로운의 프로세스와 각 단계별 산출물을 설명해 주실 수 있을까요?
이동민 가장 먼저 고객 인터뷰를 진행합니다. 저희는 “웹 제작 사전 준비 가이드”라는 양식을 제공해요. 그 안에는 로운의 업무 프로세스 / 필요 자료 요청 목록 / 브랜드의 가치, 특장점, 업종 / 웹의 목적 및 방향성 / 컬러 및 무드 등 디자인 방향성 이런 질문들이 포함되어 있습니다. 이 문서는 누구나 쉽게 작성할 수 있도록 어렵지 않은 문장으로 구성되어 있고, 디자이너뿐 아니라 웹을 운영할 담당자도 어렵지 않게 채울 수 있습니다. 이를 통해 고객이 가진 목표와 브랜드 가치, 그리고 웹에서 표현되어야 할 디자인 방향을 정리합니다.
웹 제작 사전 준비 가이드 예시
Q. 인터뷰로 목적을 파악한 뒤, 기획은 어떤 역할을 하나요?
이동민 기획은 로운에서 가장 핵심적인 절차입니다. 기획서는 단순히 ‘디자인 방향’을 정리한 문서가 아닙니다. 우리가 이해한 웹의 목적을 구조와 설계로 변환하는 과정이에요. 결국, 디자인은 이 구조와 설계를 시각화하는 단계이기 때문에 “목적이 있는 결과물”을 만들기 위해선 기획이 반드시 필요하죠. 놀랍게도 많은 분들이 노코드 솔루션을 사용하면 기획이나 디자인 없이도 바로 웹을 만들 수 있다고 생각하세요.
하지만 노코드는 ‘개발을 단순화하는 것’이지, 기획과 디자인을 생략하는 방법이 아닙니다.
기획서 주요 구성 예시Q. 로운의 웹 기획서에는 어떤 내용이 포함되나요?
이동민 저희가 작성하는 기획서에는 다음과 같은 항목들이 있습니다. 프로젝트 개요 / 사이트맵 / 콘셉트 / 레퍼런스 / 스토리보드 / 요청사항 프로젝트 개요에는 웹의 목적과 브리핑이 담기고, 이를 토대로 구조와 콘셉트, 섹션 구성, 디자인 기조가 정해집니다. 특히 스토리보드는 앞선 모든 내용을 시각적으로 집약한 단계입니다. 웹의 전체 흐름, CTA (버튼 / 링크 배치), 콘텐츠 레이아웃을 한눈에 볼 수 있어 프로젝트의 방향성을 명확히 확인할 수 있죠. 또한 스토리보드 작성 중 새로 필요한 콘텐츠가 생기면 그 역할과 목적까지 함께 기록해, 누락 없이 전체를 조망할 수 있도록 구성합니다.
스토리보드 레이아웃 및 요청사항 예시
Q. 기획서 내용은 어떻게 디자인에 반영되나요?
이동민 저희는 아임웹으로 제작하더라도 반드시 피그마에서 전체 디자인을 완성한 후 개설 단계로 넘어갑니다. 피그마는 웹의 전체 구성을 한눈에 확인할 수 있고, 기획이 의도한 흐름이 제대로 반영됐는지를 검토하기에도 좋습니다. 바로 아임웹에서 개설하면 보이는 영역이 제한적이기 때문에 전체 구조를 보기 어렵고, 클라이언트와의 소통에도 한계가 있죠. 조금 더 시간이 걸리더라도, 이 단계는 완성도와 이해도를 높이는 핵심 절차라고 생각합니다.
피그마 디자인 파일 예시
Q. 아임웹 개설 단계는 일반 개발과 어떻게 다르나요?
이동민 아임웹은 노코드 솔루션이기 때문에 디자인 모드를 활용해 웹을 구현합니다. 필요에 따라 코드 섹션을 활용하거나 인터랙션을 직접 삽입하기도 합니다. 사실 저희가 처음에 아임웹에 코드를 사용할 때만 해도 아임웹에 코드를 사용하는 걸 신기하게 생각할 때였습니다. 다만 저희는 웹에 더 좋은 구조인 게 분명히 보이는데, 솔루션의 한계로 그걸 포기하고 싶지는 않았어요 결국 지금은 코드를 꽤 잘 다루기도 하고, 구현율도 높게 개선되었습니다. 개설 이후에는 모바일 반응형 레이아웃 확인 / 오류 수정 (깨짐, 순서 바뀜 등) / SEO 설정 (메타태그, OG, 사이트명, 파비콘 등)까지 함께 진행합니다. 아임웹은 이 설정 구조가 명확해서 전문 개발 환경이 아니더라도 깔끔하게 관리할 수 있습니다.
아임웹 디자인 모드 및 관리자 페이지 예시
Q. 완성된 웹은 어떤 절차로 검수하나요?
이동민 아임웹은 PC 기준으로 제작하면 모바일 버전이 자동 생성되기 때문에 모바일에서도 오류가 없는지 꼼꼼히 확인합니다. 필요시 모바일 전용 섹션을 별도로 구성하고, 오탈자 검수 / 인터랙션 정상 작동 여부 / 링크 및 버튼 이동 경로를 하나씩 점검합니다. 내부 검수가 끝나면, 최종적으로 클라이언트 검수를 요청드리고 승인 후 프로젝트가 종료됩니다.
Q. 검수까지 완료되면 업무는 모두 종료된다고 보면 될까요?
이동민 네, 검수가 완료되면 업무는 모두 종료되고 가이드를 전달합니다. 가이드에는 자사가 아임웹의 가이드를 상황에 맞춰 아카이빙 한 내용과, 자주 묻는 질문에 대한 FAQ, 아임웹 요금제 등에 대한 기본적인 내용들이 포함되어 있습니다. 가이드는 노션으로 작성되어서 한번 전달되면 저희가 수정하는 내용이 지속적으로 업데이트되어서 클라이언트 분들이 매우 만족하시는 편입니다.
아임웹 가이드 예시마무리하며
Q. 오늘 로운의 아임웹 제작 절차와 각 절차의 중요성을 들어봤는데요 마지막으로 하고 싶은 말씀이 있으신가요?
이동민 웹 제작은 단순히 “보이는 결과물”이 아닙니다. 기획에서 디자인, 개설, 검수까지의 모든 과정이 하나의 브랜드를 표현하는 구조이자 전략이에요. 저희 로운은 아임웹이라는 솔루션을 사용하더라도 그 안에서 할 수 있는 최선의 완성도를 지향합니다. 결국 중요한 건 “어떤 도구를 쓰느냐”가 아니라 “그 도구를 어떻게 다루느냐”라고 생각합니다.
