Homepage


반응형 홈페이지제작에 대한 제작안내입니다.

Home  >  제작안내 >  반응형홈페이지 실속형


반응형홈페이지 제작 실속형


합리적인 제작비용으로 부담을 줄인 실속형, 디자인과 제공되는 기능으로도 충분합니다.


※ 누리즈닷컴에서는 반응형 홈페이지를 제작해 드리고 있습니다.

※ 홈페이지가 운영되기 위해서는 "디자인+웹프로그램+도메인+서버임대(보안서버유무)" 가 한세트가 되어 구축이 되어야 운영하실 수 있습니다.
※ 홈페이지의 제작유형에 따라 제작방식의 차이가 있습니다.

Responsive Homepage

교회, 커뮤니티등 비영리, 홈페이지만을 위한

실속형 패키지(솔루션기반)

반응형은 컴퓨터에서 스마트폰에 이르는 모든 기기에 대응된 홈페이지입니다.

이 상품은 솔루션기반으로 구축되는 형태의 상품입니다.


ㆍ제작범위
  • 메인페이지, 서브 5page범위(텍스트+이미지형)
  • 제작범위와 상이할 경우엔 별도의 견적이 필요함.
  • 메인페이지 모션 애니메이션 일부 효과 첨부
  • 상단메뉴( 마우스 롤오버 서브메뉴)
  • 소개페이지 : 인사말, 연혁, 찾아오시는 길 등...
  • 갤러리, 일반 게시판, 인스타계정 연동지원.
  • 공지사항, 자유게시판, 사진갤러리 게시판 유형
  • 일정관리, 디자인관리, 주문폼관리등 부가기능 탑재.
  • 디자인 관리자모드 - 페이지추가는 가능하나 간단한 교육이 필요함.
  • 글작성, 댓글등을 이메일로 알려주는 알림서비스 지원.
ㆍ제작비용
  • 제작범위에 따른 디자인 및 웹프로그램 등 적용비용
  • 도메인등록비용(1년유지비 27,500원 포함)
  • 서버임대비용 1년 24만원(보안서버의 도입은 제작유형에 따른 선택사항)포함.
  • 총 제작비용 : 88만원(초기 1년 도메인, 서버유지비 포함 + 제작비용), 부가세포함.
ㆍ웹호스팅비용
  • 무제한 스토리지 용량
  • 일일트래픽 20G(여유로운 접속자 확보)
  • 제작후 1년은 제작비용에 포함되어 있으며 1년 이후부터 청구됩니다.
  • 1년 이후 년간 서버이용료(월2만원, 용량무제한, 일일20G트래픽제공), 부가세는 별도
  • CDN(이미지, JS, CSS등 정적파일), 분산처리로 과부하를 방지합니다.
  • 보안서버적용시 설치지원(제작유형에 따른 선택사항)은 해드리나 유지비는 별도입니다.
ㆍ홈페이지관리
ㆍ제작기간
  • 업무일 기준 2-3주정도(기획된 내용이 준비된 상태를 기준으로 합니다.)



제공되는 기능

홈페이지 운영에 필요한 기능들로 구축해 드립니다.


레이아웃을 뒷받침하는 그리드 시스템

그리드시스템기반으로 레이아웃변경이 자유롭습니다.

간단한 관리자교육으로 누구나 쉽게 수정이 가능합니다.

운영에 꼭 필요한 게시판

일반게시판, 사진갤러리, 일정관리등

운영에 필요한 기능들이며 게시판, 갤러리도 다양한 형태의 전환이 가능합니다.

관리자가 변경되어도 인수인계는 쉽게!

여러명이 관리할 수 있으며 

각각의 관리자들의 권한을 부분적으로도 부여할 수 있습니다.

편리하게 디자인변경가능

포토샵, 워드, 한글등의 도구등의 편집처럼 관리자는 어렵지 않게

디자인을 변경하여 페이지 수정을 할 수 있습니다.

관리용 알림

관리자 알림기능을 통해 홈페이지에 글 작성, 문의등록등을

타임라인을 통해 확인할 수 있어 관리가 편리합니다.

보안, 안전함이 우선

퍼블리싱전에 1회 되돌려 작업전의 상태전환이 가능하고

암호화된 데이타를 전송하는 보안서버도 갖추었습니다.


공통사항
  • 홈페이지 제작후 유지되기 위한 기본비용은 도메인과 서버 임대비용, 보안서버적용시(선택) 유지비 입니다. 누리즈닷컴에서 관리해 드립니다.
  • 기본으로 제공되는 이외의 분량은 제작전에 미리 상담하여 주세요.
  • 실속형은 솔루션기반으로 제공하는 기능만 사용 가능하며 독립형은 확장가능한 제작형태입니다.
  • 실속형 서버유지 및 프로그램의 사용권한은 서버제공사의 운영정책 또는 약관에 따릅니다.[보기]
  • 실속형은 독립된 형태의 제작유형으로 실속형과 운영정책이 상이합니다.
  • 현재 홈페이지에 노출된 페이지나 레이아웃은 실속형으로  제작되었으며 포트폴리오엔 비지니스형으로 구축된 사이트와 혼합되어 있습니다.



반응형 홈페이지제작 FAQ


자주 물어보시는 것을 정리하여 올려드립니다.

관리자
2024-03-14
조회 52

네이버 웹마스터 도구에 등록하기 위한 준비

사이트맵 은 검색로봇에게 사이트 내에 수집되어야 할 페이지들을 알려 주기 위하여 마련된 표준 규약입니다. 사이트맵을 활용하여 URL의 추가 정보를 검색로봇에 제공할 수 있으므로 검색로봇이 사이트의 콘텐츠를 더 잘 수집할 수 있도록 도울 수 있습니다.

사이트 맵은 본문이 아닌 콘텐츠의 URL 정보만 담고 있기 때문에 사이트 내의 모든 URL을 포함하는 것을 권장합니다. 검색로봇은 해당 사이트맵에 포함된 URL 정보를 추출후 내부 알고리즘을 통하여 수집 대상 URL을 선별하여 우선 순위별로 수집을 진행합니다.


자동으로 만드는 순서

1. https://www.xml-sitemaps.com/ 에 접속합니다.

최대 500개 페이지에 대한 사이트맵을 생성하며 이 보다 많을 경우는 유료입니다.  그러나 대부분의 사이트는 무료의 범주에 들어갑니다.


2. Just enter your website URL to create a sitemap 검색창에 주소를 적습니다. 

예) https://nurizweb.com


3. 완료가 되면 다운로드를 받아 홈페이지 루트 폴더내에 올려줍니다.


4. 네이버 웹마스터 도구로 접속하여 해당 도메인클릭 -> 요청 -> 사이트맵 제출 -> URL입력 -> 확인



관리자
2023-12-05
조회 57

사이트를 카카오톡으로 공유할때 대표이미지나 텍스트등이 예전정보로 공유가 된다면 여기서 캐시를 삭제해 보세요.

카카오 디벨로퍼스 공유 디버거에 접속합니다.

https://developers.kakao.com/tool/debugger/sharing

로그인을 한 후...

내 도메인 주소를 입력합니다.  디버그로 먼저 오픈그래프 정보를 확인하신 뒤에 캐시 초기화를 진행해 주시면 됩니다.






관리자
2023-06-16
조회 213

그리드 시스템(Grid System)을 활용하면 초심자도 아름답고 질서있는 구조의 웹사이트를 더 쉽고 빠르게 제작할 수 있습니다. 

현재 제작해 드리는 시스템에서 그리드 시스템이 어떻게 적용되는지 알아보겠습니다.


그리드 시스템이란?

그리드 시스템(Grid System)이란, 페이지 콘텐츠를 논리적이고 일관성 있는 질서와 구조로 디자인할 수 있도록 돕는 그래픽 시스템을 말합니다. 

여기서 그리드(Grid)는 사전적 의미로 '격자무늬' 또는 '격자판'을 의미하며, 디자이너는 아래 그림과 같이 격자 선에 맞춰 디자인에 규칙을 부여하여 페이지를 더 보기 좋고, 알기 쉽게 제작하는 데 도움이 됩니다.


https://s3-us-west-2.amazonaws.com/secure.notion-static.com/1abe3157-eaf2-47df-b3d1-2dafdc311585/GridSystem.gif


그리드 시스템은 1970년대 중반부터 건축, 일러스트레이션, 책, 신문과 같은 다양한 분야에 사용되어 왔는데, 인터넷 보급 후 기술의 발전에 따라 웹 디자인에도 사용되기 시작했습니다.

웹 디자인에서 그리드 시스템은 페이지의 디자인 영역을 나누고, 각 영역에 디자인 요소를 배치하는 데 사용됩니다. 그리드 시스템은 웹 디자인에 있어 아래와 같은 긍정적인 역할을 합니다.

  • 컬럼 단위로 요소를 구성하므로 많은 양의 콘텐츠도 정돈된 느낌을 준다.
  • 격자 형식에 따르므로 블록을 쌓듯 디자인이 편리하다.
  • 일관되고 통일성 있는 아름다운 웹 디자인이 가능하다.

12-그리드 시스템

제공되는 관리자모드의 디자인모드에서는 초보자도 쉽고, 간편하게, 아름다운 웹 디자인이 가능하도록 그리드 시스템을 제공합니다. 

그리드 시스템은 8개, 12개, 16개 등 그 형식이 다양하지만, 여기서는 반응형 웹 디자인에 최적화된 12-그리드 시스템을 채용하고 있습니다.


https://s3-us-west-2.amazonaws.com/secure.notion-static.com/023289e0-254a-41a5-91f8-c2515cb3c17b/0798a9a3ce372.jpg


12-그리드 시스템에서는 페이지에 12개의 컬럼(열)을 제공합니다. 

사용자는 페이지에 텍스트, 이미지, 버튼과 같은 요소를 추가한 다음, 각 요소를 1/12칸 단위로 제어할 수 있습니다.



언뜻 보면 제약이 많아 보이지만, 오히려 이러한 제약이 일관되고 안정된 디자인을 하는 데 도움이 됩니다. 

틀을 잡아주는 그리드 시스템은 디자인 과정을 간단하고 명료하게 해주며, 방대한 양의 콘텐츠도 컬럼 단위로 묶어 정돈해 표현할 수 있기 때문입니다.


그리드 시스템 활용하기

그리드 시스템은 방문자에게 페이지가 포함하는 정보를 최적의 형태로 보여주고, 전달하기 위한 도구입니다. 

그리드 시스템에 따라 페이지를 디자인하면 많은 양의 정보도 정돈되고 안정된 구조로 만들어주며, 가독성 및 심미성도 더해집니다. 아래는 12-그리드를 활용한 정보 배치의 예제입니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d228e585-1b57-47d6-8cef-f9be9e251044/3dc8aee7cdab4.png

레이아웃은 페이지가 포함하는 정보의 양, 종류에 따라 달라집니다. 

예를 들어, 방문자에게 제품 갤러리를 보여주고자 한다면 위 그림에서 왼쪽 상단의 레이아웃이 적합할 수 있습니다. 

또한, 만약 여러분이 비영리단체를 운영하고 있고, 단체를 소개하면서 버튼 클릭 시 상세한 활동내역을 보여주고자 한다면 위 그림에서 오른쪽 하단의 레이아웃이 적합할 수 있습니다.

이처럼 그리드 시스템은 아름다운 페이지를 디자인하는 데 도움을 주며, 사이트의 정보를 최적의 형태로 전달하는 데 도움을 줍니다.


첨부된 파일은 12그리드 템플릿으로 다운받으셔서 출력한 후 직접 디자인으로 연습해 보시길 바랍니다.

관리자
2023-06-16
조회 85

네.  아래와 같은 절차로 진행이 됩니다.


1. 사용하는 웹 메일 서비스사로 MX레코드값을 문의해 주세요!
2. 받으신 값을 저희쪽으로 보내주시면 됩니다.


다음스마트워크

이름타입데이터우선순위

mydomain.comMXASPMX.daum.net.10
mydomain.comMXALT.ASPMX.daum.net.20
mydomain.comMX"v=spf1 include:_spf.daum.net ~all"
*기본 txt값은 삭제해 주세요.

GSuite(Google)

이름타입데이터우선순위

mydomain.comMXASPMX.L.GOOGLE.COM.1
mydomain.comMXALT1.ASPMX.L.GOOGLE.COM.5
mydomain.comMXALT2.ASPMX.L.GOOGLE.COM.5
mydomain.comMXALT3.ASPMX.L.GOOGLE.COM.10
mydomain.comMXALT4.ASPMX.L.GOOGLE.COM.10

라인웍스

이름타입데이터우선순위

mydomain.comMXkr1-aspmx1.worksmobile.com.10
mydomain.comMXkr1-aspmx2.worksmobile.com.20
mydomain.comMX"v=spf1 include:spf.worksmobile.com ~all"
*기본 txt값은 삭제해 주세요.

하이웍스

이름타입데이터우선순위

mydomain.comMXmailapp.hiworks.co.kr.10
mydomain.comCNAMEhiworksapp.hiworks.co.kr.
mydomain.comCNAMEmailapp.hiworks.co.kr.
mydomain.comCNAMEmailapp.hiworks.co.kr.
mydomain.comCNAMEhiworksapp.hiworks.co.kr.
mydomain.comTXT"v=spf1 include:_spf.daum.net ~all"
*기본 txt값은 삭제해 주세요

[참고]  MX 레코드 설정 후 최대 72시간 정도 웹 메일 수/발신이 불안정할 수 있습니다.

관리자
2023-06-08
조회 110

Google에 사이트맵을 제출하면 Google이 내 사이트 정보를 더 효과적으로 수집하여 더 많이 검색에 반영될 수 있습니다.

  1. 왼쪽 메뉴에서 [색인 > Sitemaps]를 클릭합니다.
  2. 새 사이트맵 추가 항목에 sitemap.xml 을 입력하고, 제출 버튼을 클릭합니다.

  3. 내 사이트 사이트맵 정보 제출이 완료되어, Google에 반영되기 시작합니다.
관리자
2023-06-08
조회 87


  1. 아임웹은 파일 업로드가 불가하기 때문에, 다른 확인 방법 항목에서 HTML 태그 를 클릭합니다.

  2. 복사 버튼을 클릭해 메타태그를 복사합니다.

  3. 이 상태에서 새로운 브라우저 탭을 켜고, 내 아임웹 사이트의 관리자 페이지에 접속합니다.

    주의: Google 서치콘솔 브라우저 창을 끄지마세요.
  4. 왼쪽 메뉴에서 [환경설정 > SEO, 헤더설정]을 클릭해 이동합니다.
  5. 마우스 휠 스크롤을 내려 공통 코드 삽입 항목으로 이동 후, Meta Code 에 위 2번 과정에서 복사한 메타 태그를 붙여넣습니다. (단축키: CTRL + V)

  6. 오른쪽 상단의 저장 버튼을 클릭해 적용합니다.
  7. 위 2번 과정에서 열어두었던 Google 서치콘솔 창으로 돌아가 확인 버튼을 클릭합니다.


  8. 소유권이 확인창이 뜨면, 이제 Google 검색 로봇이 며칠 이내로 내 사이트 정보를 수집하여 검색 결과에 반영하기 시작합니다. 더 효과적으로 페이지를 수집할 수 있게 하려면 속성으로 이동을 클릭해, 다음 단계를 마저 작업해 주세요.





관리자
2023-06-08
조회 84
  1. Google 서치콘솔(Search Console)에 접속합니다.
  2. 시작하기 버튼을 클릭합니다. (Google 계정으로 로그인이 필요합니다.)

  3. URL 접두어 유형에서 URL 입력 칸에 내 사이트 도메인(URL) 주소를 입력하고, 계속 버튼을 클릭합니다.

    참고: 도메인은 반드시 프로토콜(http 또는 https)을 포함하고 있어야 합니다. SSL을 구입했다면 https 로 시작합니다. 도메인 주소는 내사이트의 사이트 이름 아래에서 확인할 수 있습니다.


관리자
2023-06-08
조회 107

네이버 서치어드바이저를 사용해 네이버에 사이트를 등록하면 보다 효율적으로 네이버 검색결과에 노출 시킬 수 있습니다.

중요: 네이버 웹마스터 도구를 통해 네이버에 등록한 웹사이트는 네이버가 사이트 정보를 수집하는 과정에서 일정 시간(약 14~16일)이 소요됩니다. 단, 모든 웹문서/사이트의 노출은 보장하지 않으며, 노출 영역 또한 네이버의 검색 로직에 따라 결정됩니다.


등록방법


1단계: 네이버 서치어드바이저 접속하기

  1. 네이버 서치어드바이저에 접속합니다.
  2. 오른쪽 상단의 웹마스터 도구 버튼을 클릭합니다.
  3. 네이버 아이디로 로그인 합니다.


2단계: 사이트 추가하기

  1. 내 사이트 도메인을 입력합니다.

    주의: 내 사이트 도메인에 SSL 보안서버 인증서 설치 여부에 따라 도메인 프로토콜이 http 또는 https 로 달라질 수 있습니다. 이 작업을 수행하기 전에 도메인에 SSL 설치 여부를 확인해 주세요.

  2. 추가 버튼을 클릭합니다.
    참고: 여러 도메인을 사용 중이라면 대표(기본) 도메인 하나만 입력하세요.


3단계: 사이트 소유 확인

  1. 사이트 소유 확인 방식을 HTML 태그로 선택합니다.
  2. 메타태그를 복사합니다. *네이버 웹마스터 도구 창을 닫지 마세요!


4단계: 메타태그 붙여넣기

  1. 내 사이트 관리자 페이지에 접속합니다. 접속방법
  2. 왼쪽 메뉴에서 [환경설정 > SEO, 헤더설정]을 클릭합니다.
  3. Meta Code 항목에 위 3단계에서 복사한 메타 태그를 붙여넣습니다.

  4. 저장 버튼을 클릭해 적용합니다.


5단계: 자동 등록 방지 문자 입력

  1. 네이버 웹마스터 도구 등록 화면으로 돌아갑니다.
  2. 자동 등록 방지 문자를 입력합니다.

  3. 확인버튼을 클릭하고 다음 단계로 넘어갑니다.
  4. 소유 확인이 완료 되었다는 창이 뜨면 확인을 클릭해 주세요.


6단계: 등록 완료

사이트 등록이 마무리 되었습니다. 더 빠른 네이버 검색 노출을 위해 아래 추가 설정도 완료해 주세요.


추가적으로...


네이버 서치어드바이저 추가 설정하기

아래 3가지 작업을 통해 네이버 검색엔진에 더 정확한 내 사이트 정보를 전달해 주세요.

  1. 네이버 서치어드바이저 도구 RSS 제출하기
  2. 네이버 서치어드바이저 사이트맵 제출하기
  3. 네이버 서치어드바이저 도구 수집설정 변경하기


이 모든 설정은 누리즈닷컴에서 대행해 드립니다. 


관리자
2023-05-30
조회 83

페이지에 대한 레이아웃을 미리 편집해 놓은것을 셋팅시 적용해 드림으로 글자나 일부 이미지변경등을 드래그앤 드롭으로 변경이 가능하므로 페이지구성에 대한 고민을 줄일 수 있게 됩니다.

  • 일반페이지
  • 인스타그램연동페이지
  • 다양한 게시판의 형태
  • 일정관리, 월, 주, 일간 일정관리
  • 주문 또는 양식폼


여길 클릭하세요!


관리자
2023-05-30
조회 60

물론입니다.

언제 어디서든 놓치지 않고 내 사이트를 관리할 수 있습니다.

관리용 알림기능으로 새로운 회원가입, 게시물, 문의가 들어오면 실시간 알림을 받을 수 있습니다.


그리고 여러명이 관리할 수 있습니다.

다른 사람들과 함께 사이트를 관리하면 생산성을 높일 수 있게 됩니다.

각각의 관리자들의 권한을 부분적으로 부여할 수 있기 때문에 관리자가 부재중이거나 퇴사하여도 안정적으로 운영할 수 있습니다.


여기에 통계기능을 더하여 사이트의 방문경로에 대한 통계자료를 제공합니다.


Nuriz Web Design


누리즈닷컴 | 사업자번호 : 314-09-57614 | 통신판매업 : 2018-대전서구-1001
Tel. 010-6430-0914 / 042-223-8163 | Fax. 042-487-0333 | suriv@hanmail.net
Addr. 대전광역시 서구 대덕대로 325 6F 97 | 대표. 개인정보담당 : 김용성(click114.net@gmail.com)

카카오톡 채널 채팅하기 버튼