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


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

관리자
2023-12-05
조회 15

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

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

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

로그인을 한 후...

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






관리자
2023-06-16
조회 114

그리드 시스템(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
조회 56

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


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
조회 58

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

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

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


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

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

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

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

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


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





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

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

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


관리자
2023-06-08
조회 54

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

중요: 네이버 웹마스터 도구를 통해 네이버에 등록한 웹사이트는 네이버가 사이트 정보를 수집하는 과정에서 일정 시간(약 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
조회 59

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

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


여길 클릭하세요!


관리자
2023-05-30
조회 38

물론입니다.

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

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


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

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

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


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

관리자
2023-05-30
조회 29

쉽게 설계되기도 했지만 기능면에서도 강력하게 구성되어 있습니다.

홈페이지에 필요한 기능들을 빼놓지 않았습니다.  

게시판, 갤러리, 일정관리, 입력폼, 지도삽입, 공유하기, 코드삽입 등이 바로 그것입니다.

페이지내에 위와 같은 기능들을 드래그앤드롭으로 가져다 놓을 수 있습니다.


처음에 홈페이지의 구성을 누리즈닷컴에서 완성해 드리면 간단한 교육만으로 위와 같은 기능들을 다루실 수 있게 됩니다.



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)