Morqelia 웹디자인 스튜디오 Morqelia 웹디자인 스튜디오

웹디자인 서비스

새로 만들까, 지금 사이트를 고칠까

작은 화면에서 먼저 통하는 홈페이지. 현재 사이트를 먼저 뜯어봅니다. 고칠 것과 새로 짤 것을 나누고, 반응형 전환과 모바일 우선 정리, 성능 최적화 중 어디에 힘을 줄지 정합니다.

대구 중구 대봉로 25에서 직접 봅니다. 전화 +82-53-421-9903 · 월–금 09:00–18:00 · morqelia.info

측정값 · 대비

4.5:1

본문과 배경의 대비를 4.5:1 기준으로 재고 출발합니다.

어디서 갈라지는지

신규 제작이 맞는 경우와 리뉴얼이 맞는 경우

같은 예산도 구분이 정확하면 결과가 다릅니다. 아래 두 판을 나란히 놓고 보세요.

  • 도메인과 상호만 있을 때

    구조가 없으면 새로 그리는 편이 빠릅니다. 메뉴와 폼, 검색을 KRDS 패턴으로 처음부터 잡고 KWCAG 기준을 함께 넣습니다.

    범위 — 전체 구조 + 폼 + 검색

  • PC용 옛 화면만 남았을 때

    옛날 PC 화면을 뜯어고치는 것보다 모바일 우선으로 새로 시작하는 쪽이 일정과 비용이 안정적입니다.

    범위 — 모바일 우선 재설계

  • 메뉴가 뒤엉켜 수습이 안 될 때

    고쳐 쓸수록 꼬이는 구조는 과감히 새로 짭니다. 콘텐츠는 옮기고 길찾기는 단순하게 다시 만듭니다.

    범위 — 정보 구조 정리

  • 콘텐츠는 좋은데 순서가 문제일 때

    글과 사진은 살릴 만합니다. 첫 화면 순서와 버튼 위치만 바꿔도 문의가 달라집니다. 전면 교체보다 부분 개선이 현명합니다.

    방식 — 부분 개선 우선

  • 속도만 느리고 뼈대는 멀쩡할 때

    구조는 두고 무거운 사진과 폰트, 스크립트만 가볍게 합니다. 대체 텍스트와 대비, 초점 순서까지 손보면 체감이 큽니다.

    방식 — 성능 + 접근성 손질

핀으로 고정된 점검 시트와 시편이 걸린 작업판

리뉴얼 전에는 품질마크 취득 사례처럼 항목을 먼저 잡습니다. 고칠 목록이 서야 견적이 섭니다.

작업판 위 점검 시트 — 순서가 정해지면 공사가 빨라집니다.

범위와 기준

반응형 홈페이지의 범위

PC와 태블릿, 모바일을 따로 만들지 않습니다. 하나의 구조가 화면 너비에 따라 바뀝니다. 이미지는 해상도별로 다르게 내고, 표는 모바일에서 카드로 바뀝니다. 네비가 길면 하단 고정 메뉴를 둡니다.

자로 인쇄 시편을 재단하는 손

모바일 우선 UX 정리

결제와 회원가입을 짧게 만드는 것이 먼저입니다. 빠른 결제 흐름, 즉 단계 수를 줄인 결제 경험이 기준입니다.

  • 불필요한 입력 칸을 덜고 자동 완성을 넣어 타이핑을 줄입니다. 입력 절감
  • 네이버 로그인을 넣어 가입 장벽을 낮추고, 문의는 전화와 폼 두 가지로 둡니다. 가입 간소화
  • 오류 문장은 다음 행동을 알려주고, 실제 휴대폰 저속 환경에서 직접 확인합니다. 오류 안내
  • 전화 연결 +82-53-421-9903 과 폼을 나란히 두어 막힘없이 이어집니다. 문의 동선

가볍게 여는 법

웹 성능 최적화 항목

교정지를 대고 화면 구조를 살피는 모습

사진과 폰트부터 가볍게

이미지 압축과 지연 로딩이 기본입니다. 웹폰트를 줄이고 시스템 폰트와 섞어 첫 화면을 가볍게 둡니다.

색 대비를 재는 작업 장면

스크립트는 뒤로

꼭 필요한 것만 남기고 뒤로 미룹니다. 한국 시장의 고속 연결 중심 사용에 맞춰 체감이 끊기지 않게 합니다.

카페 테이블 위에서 휴대폰 결제를 확인하는 모습

필요하면 오프라인 대응

PWA가 필요하면 오프라인 캐시와 설치 흐름까지 봅니다. 매장에 자주 오는 손님일수록 꺼지지 않는 화면이 돕습니다.

읽힘과 문의

가독성과 전환의 연결

행간과 글자 간격이 좋아지면 머무는 시간이 바뀝니다. 본문 다음에 오는 버튼 문장이 중요합니다. 가격과 일정, 위치를 숨기지 않습니다.

대구 중구 방문 상담이 가능하다는 안내 한 줄이 신뢰를 줍니다. 쉬운 탐색이 문의로 이어지고, 문의가 오면 문의하기에서 바로 이어받습니다.

  • 본문은 넉넉한 행간으로, 제목과 본문의 위계를 분명하게 둡니다.

  • 버튼 문장은 다음 행동을 적습니다. 담기는 방식보다 무엇이 되는지 말합니다.

  • 주소 25, Daebong-ro, Jung-gu, Daegu 와 상담 시간을 먼저 밝힙니다.

산출물과 운영

넘겨드리는 것과 이어가는 것을 문서로 남깁니다.

  1. 넘김 01

    시안 파일과 접근성 점검표, 운영 가이드를 함께 전달합니다.

  2. 넘김 02

    메뉴 추가 방법과 원고 교체 순서를 적어 담당자가 바뀌어도 이어가게 둡니다.

  3. 넘김 03 · 대응 포함

    공개 후 한 달간 오류 대응을 돕고, morqelia.info 메일과 전화 창구를 유지합니다.

저녁 빛이 드는 스튜디오 복도와 종이 뭉치

자주 묻는 점

결제 단순화와 일정

모바일 우선으로 설계할 때 결제와 회원가입은 어떻게 단순화해야 하나요?

입력 칸을 줄이고 순서를 3단계 안으로 둡니다. 소셜 로그인과 자동 완성으로 타이핑을 줄입니다. 오류 문장은 다음 행동을 알려줍니다. 마무리는 실제 휴대폰 저속 환경에서 확인합니다.

기간은 얼마나 걸리나요?

구성과 원고 준비에 따라 다릅니다. 일반적인 소개형은 구조 확정 후 수 주 안에 공개합니다. 쇼핑몰과 예약 기능이 있으면 더 봅니다. 첫 미팅에서 일정을 문서로 확정합니다.