웹디자인 잘하는 방법 #3 – dmp

웹디자인 잘하는 방법 #3 – dmp

http://www.dmppartners.com/about/

다른 에이전시에서 제작한 "dmp" 홈페이지를 똑같이 만들어봅시다.

홈페이지를 똑같이 만들어 봄으로써 웹디자인 잘 하는 방법은 그 홈페이지를 제작한 사람들(프로들)의 실력을 고스란히 자신의 것으로 만들 수 있게 됩니다.

이는 홈페이지제작을 배우기 위한 학생 혹은 신입 디자이너한테 피가 되고 살이 되는 유익한 도움이 됩니다.

홈페이지 디자인을 잘 하고싶은 분이 이 포스트를 보고 도움이 되었으면 합니다.

 

1. 홈페이지를 만들기 전 준비과정

– 내가 어떤 사이트를 만들고, 어떤 컨셉인지를 확실히 알아야 합니다. 사용자의 마음을 헤아리기 위함입니다.

기본) 글자를 알아봅시다.

– 홈페이지는 사용자들에게 정보를 전달하기 위함입니다. 그마만큼 읽기가 좋은 글인가 아닌가가 매우 중요한 요소이지요.

홈페이지 텍스트에 사용되는 글꼴, 글자 크기, 글자 자간 등을 알아보는 것이 매우 중요합니다.

글자의 간격에 대한 내용은

 

이곳을 참조하시면 됩니다.(미완)

 

다음은 그리드를 딸 사이트의 글꼴을 알아보는 방법입니다.

먼저 그리드를 만들 사이트의 글자 위에 마우스의 우측 키를 누른다음 검사를 클릭합니다.

그런 다음, 가운데 보이는 창 위에 마우스를 올리면 오른편에 저렇게 font-family가 뜨게 됩니다. font-family에 써있는 폰트들이 바로 이 사이트에 쓰인 글꼴이죠.

웹디자인 잘하는 방법은 따로 있습니다.

font-family : ' 이곳에 쓰인 게 폰트 이름 ' , 이곳에 쓰인 게 글씨체입니다 ;

이번 사이트에서는 폰트가 Open Sans가 쓰였네요. open sans라는 한글폰트는 없어 Noto Sans CJK KR을 사용하였습니다.

 

1) 키워드 리서치

– 먼저, 내가 제작한 사이트의 소비자가 검색을 어떻게 할 것인가를 생각하고, 키워드 정보 등 가능한 100개 이상의 레퍼런스 수집합니다.
tip> ex) 00자동차 가격, 00자동차 성능, 00자동차 기능 등

2) 이미지맵

-상업용/비상업용 등 구분하지 않고 내가 만들 홈페이지에 쓸 이미지를 가능한 많이 찾습니다.
tip> 상업용과 비상업용 파일을 분리하면 나중에 상업용 사이트를 만들기 편합니다.

3) 벤치마킹사이트

– 벤치마킹할 사이트의 기준은 우선, 가독성 좋고 깔끔한 사이트가 좋습니다.
비쥬얼 및 효과도 중요하지만, 그보다 처음 사이트에 접근한 소비자가 한 눈에 이해하고 보기 쉬운 사이트가 가장 중요합니다.

– 가이드(그리드)를 만듭니다.

– 카피를 준비합니다.

– 모아 두었던 이미지를 대입합니다.

– 완성

 

2. 홈페이지를 그대로 따라 만들어봅시다.

: 웹디자인 잘 하는방법 중에서 저번에 리리코스를 할 때 흑백 처리를 한 후에 들어갔었지만 직접 제작하는 사이트라면 모를까 사이트를 그대로 만드는 것이기 때문에, 사이트에서 뜬 이미지를 넣어서 만들어 봅시다.

흑백 처리를 하는 이유는 사이트를 직접 만들 때 전체전인 가이드라인을 잡기 위해서인데, 이 사이트 같은 경우에는 완벽하게 가이드라인이 잡혀 있으니까요. 이미지도 물론이고요 :3

이번에는 다른 사이트를 그대로 제작할 때, 무엇을 알아두면 좋을지에 대해 알아봅시다.

1. 글자 사이의 간격

글자 위아래, 위치 등 모든 것이 중요합니다. 아무래도 사이트에 들어온 사람들이 보기 편해야 하는 것인데, 인펜토같이 퀄리티가 높은 사이트는 그런 부분에 특히나 더 신경쓰기 때문에 알아두면 좋습니다.

예를 들어, 이 글자 사이의 간격(주황색 상자)를 보면 위에가 35px, 아래가 60px정도 되네요.

이런 글자간격이 특별할 것 없어 보이지만, 알고보면 수년동안 쌓아올린 경험이 묻어나 있는 결과물이지요.

2. 이미지의 위치

이미지든, css로 만든 상자 위에 쓴 글과 마찬가지로 다 고민하면서 나오는 것이므로 알아두면 좋습니다.

예를 들자면, 주황색 상자로 씌운 하얀 원의 색상이나 위치 등을 말합니다.

가운데 파란 선(커다란 주황 화살표로 표시)을 보시면 가운데에 배열되어 있는 것을 아실 겁니다. 그럼 저것을 보고'아 이 사이트는 이렇게 했구나' 하고 외우시면 됩니다.

이런 사소한 부분들도 외워두시면 직접 사이트를 만드실 때 도움이 됩니다.

다른 부분(작은 화살표)을 보시면 제가 크기를 재기 위해 만들어둔 상자들이 보이네요 :3

3. 포토샵

이번에는 전에 올렸던 포토샵을 다시 올려드리겠습니다. 아무래도 포토샵으로 만드는 것이다 보니 자주 보면 좋겠죠?

– 레이어를 순차적으로 정리 한 후(header, main, content, footer 등) 차례대로 원뎁스, 투뎁스, 쓰리뎁스를 정의해 줍니다.

   1뎁스(depth)(:) (부모 개념)

   2뎁스(depth)(::) (자식 개념)

   3뎁스(depth)(:::) (자식의 자식 개념)

뎁스 예시

– 메뉴 부분은 다 같이 그룹핑해서 게 작업하는 게 편리합니다. ex) 회사소개 제품소개 ~~ > 하나의 텍스트 레이어로

– 가이드라인은 최대한 줄입니다. 많으면 어떤 것을 위해 가이드라인을 쳤는지 모르게 됩니다.

이런 부분들을 알고 제작하시는게 더 유익할 것입니다.

완성!

웹디자인 잘하는 방법 #2 – 인펜토

웹디자인 잘하는 방법 #2 – 인펜토

http://iinnovation.co.kr/

다른 에이전시에서 제작한 “인펜토” 홈페이지를 똑같이 만들어봅시다.

홈페이지를 똑같이 만들어 봄으로써 그 홈페이지를 제작한 사람들(프로들)의 실력을 고스란히 자신의 것으로 만들 수 있게 됩니다.

이는 홈페이지제작을 배우기 위한 학생 혹은 신입 디자이너한테 피가 되고 살이 되는 유익한 도움이 됩니다.

홈페이지 디자인을 잘 하고싶은 분이 이 포스트를 보고 도움이 되었으면 합니다.

 

1. 홈페이지를 만들기 전 준비과정

– 내가 어떤 사이트를 만들고, 어떤 컨셉인지를 확실히 알아야 합니다. 사용자의 마음을 헤아리기 위함입니다.

기본) 글자를 알아봅시다.

– 홈페이지는 사용자들에게 정보를 전달하기 위함입니다. 그마만큼 읽기가 좋은 글인가 아닌가가 매우 중요한 요소이지요.

홈페이지 텍스트에 사용되는 글꼴, 글자 크기, 글자 자간 등을 알아보는 것이 매우 중요합니다.

글자의 간격에 대한 내용은

이곳을 참조하시면 됩니다.

 

다음은 그리드를 딸 사이트의 글꼴을 알아보는 방법입니다.

먼저 그리드를 만들 사이트의 글자 위에 마우스의 우측 키를 누른다음 검사를 클릭합니다.

그런 다음, 가운데 보이는 창 위에 마우스를 올리면 오른편에 저렇게 font-family가 뜨게 됩니다. font-family에 써있는 폰트들이 바로 이 사이트에 쓰인 글꼴이죠.

font-family : ‘ 이곳에 쓰인 게 폰트 이름 ‘ , 이곳에 쓰인 게 글씨체입니다 ;

이번 사이트에서는 폰트가 Noto Sans KR, Dotum 이렇게 2가지 쓰였는데요, 저는 이번에 Noto Sans KR을 주로 사용하였습니다.

 

1) 키워드 리서치

– 먼저, 내가 제작한 사이트의 소비자가 검색을 어떻게 할 것인가를 생각하고, 키워드 정보 등 가능한 100개 이상의 레퍼런스 수집합니다.
tip> ex) 00자동차 가격, 00자동차 성능, 00자동차 기능 등

2) 이미지맵

-상업용/비상업용 등 구분하지 않고 내가 만들 홈페이지에 쓸 이미지를 가능한 많이 찾습니다.
tip> 상업용과 비상업용 파일을 분리하면 나중에 상업용 사이트를 만들기 편합니다.

3) 벤치마킹사이트

– 벤치마킹할 사이트의 기준은 우선, 가독성 좋고 깔끔한 사이트가 좋습니다.
비쥬얼 및 효과도 중요하지만, 그보다 처음 사이트에 접근한 소비자가 한 눈에 이해하고 보기 쉬운 사이트가 가장 중요합니다.

– 가이드(그리드)를 만듭니다.

– 카피를 준비합니다.

– 모아 두었던 이미지를 대입합니다.

– 완성

 

2. 홈페이지를 그대로 따라 만들어봅시다.

: 저번에 리리코스를 할 때 흑백 처리를 한 후에 들어갔었지만 직접 제작하는 사이트라면 모를까 사이트를 그대로 카피하는 것이기 때문에, 사이트에서 뜬 이미지를 넣어서 만들어 봅시다.

흑백 처리를 하는 이유는 사이트를 직접 만들 때 전체전인 가이드라인을 잡기 위해서인데, 이 사이트 같은 경우에는 완벽하게 가이드라인이 잡혀 있으니까요. 이미지도 물론이고요 :3

이번에는 다른 사이트를 그대로 제작할 때, 무엇을 알아두면 좋을지에 대해 알아봅시다.

1. 글자 사이의 간격

글자 위아래, 위치 등 모든 것이 중요합니다. 아무래도 사이트에 들어온 사람들이 보기 편해야 하는 것인데, 인펜토같이 퀄리티가 높은 사이트는 그런 부분에 특히나 더 신경쓰기 때문에 알아두면 좋습니다.

예를 들어, 이 글자 사이의 간격(주황색 상자)를 보면 위에가 35px, 아래가 60px정도 되네요.

이런 글자간격이 특별할 것 없어 보이지만, 알고보면 수년동안 쌓아올린 경험이 묻어나 있는 결과물이지요.

2. 이미지의 위치

이미지의 위치나 css로 만든 도형의 형태와 위치 등도 위에 쓴 글과 마찬가지로 다 고민하면서 나오는 것이므로 알아두면 좋습니다.

예를 들자면, 주황색 상자로 씌운 하얀 원의 색상이나 위치 등을 말합니다.

가운데 파란 선(커다란 주황 화살표로 표시)을 보시면 가운데에 배열되어 있는 것을 아실 겁니다. 그럼 저것을 보고 ‘아 이 사이트는 이렇게 했구나’ 하고 외우시면 됩니다.

이런 사소한 부분들도 외워두시면 직접 사이트를 만드실 때 도움이 됩니다.

다른 부분(작은 화살표)을 보시면 제가 크기를 재기 위해 만들어둔 상자들이 보이네요 :3

3. 포토샵

이번에는 전에 올렸던 포토샵을 다시 올려드리겠습니다. 아무래도 포토샵으로 만드는 것이다 보니 자주 보면 좋겠죠?

– 레이어를 순차적으로 정리 한 후(header, main, content, footer 등) 차례대로 원뎁스, 투뎁스, 쓰리뎁스를 정의해 줍니다.

   1뎁스(depth)(:) (부모 개념)

   2뎁스(depth)(::) (자식 개념)

   3뎁스(depth)(:::) (자식의 자식 개념)

뎁스 예시

– 메뉴 부분은 다 같이 그룹핑해서 게 작업하는 게 편리합니다. ex) 회사소개 제품소개 ~~ > 하나의 텍스트 레이어로

– 가이드라인은 최대한 줄입니다. 많으면 어떤 것을 위해 가이드라인을 쳤는지 모르게 됩니다.

이런 부분들을 알고 제작하시는게 더 유익할 것입니다.

완성!

네이버모바일에서 pc로 가지는경우

네이버모바일에서 pc로 가지는경우

 

 

네이버모바일에서 pc로 가지는경우

네이버모바일에서 pc로 가지는경우

네이버모바일에서 pc로 가지는경우 모바일 버전에서 상자안에 있는 메뉴를 클릭했을 때, 모바일 페이지가 아닌 pc 페이지로 넘어가는 경우가 있습니다.

예를 들어 여기 상자 안의 [YOONHO] 페이지를 클릭해볼까요?

네이버모바일에서 pc로 가지는경우

이렇게 pc페이지로 뜨네요..

다시 모바일 페이지로 뜨게 하기 위해서는

/www/pages/sub1-1.php ~ /www/pages/sub4-4.php 페이지 10번째 줄 아래부분
() 까지 자바스크립트 추가

document.location='/m/sub01.html'; 부분을 해당 페이지로 경로 이동시킴

/www/bbs/board.php 10~18번째 줄 부분 추가

모바일로 접속시 $bo_table 이 notice 인경우와 gallery 인 경우 다른 게시판으로 이동시킴

그러면 아래 그림처럼 모바일 페이지가 뜨게 됩니다

네이버모바일에서 pc로 가지는경우

네이버모바일에서 pc로 가지는경우 이렇듯 소스를 직접 수정해줘야하며 네이버하고는 아무런 관련이 없습니다.

홈페이지가격

홈페이지가격

 

1. 항목별 견적산출

예) 1페이지당 견적 > 10만원 ~ 30만원

장점 : 홈페이지의 사이트맵을 토대로 견적이 나가는 것이기 때문에 완료/미완료 사항을 쉽게 확인 가능하다.

단점 : 추가사항이 발생하면, 비용이 발생할 수 있다.

2. MAN-MOONTH 기준으로 산출

한달동안의 인건비에 대하여 가격을 산출 하는 방식이다.

장점 : 한달 동안 업무 수준과 상관없이 진행이 용이하다.

단점 : 아주 쉬운 업무도 고급이력이 투여 되면, 비싼 가격으로 제작되야 한다.

  • 구분

  • 일노임단가

  • 월노임단가

  • 제경비

  • 기술료

  • 월인건비

  • 내용
  • 일노임단가 * 22.34일
  • 월노임단가 * 110%
  • (월노임단가+제경비) * 20%
  • 월노임단가 + 제경비 + 기술료
  • 기술사
  • 452,611
  • 10,111,330
  • 11,122,463
  • 4,246,759
  • 25,480,552
  • 특급기술자
  • 391,068
  • 8,736,459
  • 9,610,105
  • 3,669,313
  • 22,015,877
  • 고급기술자
  • 305,353
  • 6,821,586
  • 7,503,745
  • 2,865,066
  • 17,190,397
  • 중급기술자
  • 239,506
  • 5,350,564
  • 5,885,620
  • 2,247,237
  • 13,483,421
  • 초급기술자
  • 191,320
  • 4,274,089
  • 4,701,498
  • 1,795,117
  • 10,770,704
  • 고급기능사
  • 191,177
  • 4,270,894
  • 4,697,984
  • 1,793,776
  • 10,762,654
  • 중급기능사
  • 158,490
  • 3,540,667
  • 3,894,733
  • 1,487,080
  • 8,922,480
  • 초급기능사
  • 114,914
  • 2,567,179
  • 2,823,897
  • 1,078,215
  • 6,469,291

* SW기술자 평균임금은 소프트웨어산업진흥법 제22조(소프트웨어사업의 대가지급) 4항 ‘소프트웨어기술자의 노임단가’를 지칭함.

* 월평균임금은 일평균*근무일수(20.8일), 시간평균임금은 일평균÷8시간으로 각각 산정함.

* SW기술자 평균임금은 기본급, 제수당, 상여금, 퇴직급여충당금, 법인부담금을 모두 포함한 결과임.

* 2017년의 월평균 근무일수는 20.8일로 조사됨.

* SW기술자 평균임금은 2016년 대비 3.1% 증가함.

* DB구축비 대가기준 가이드에서 활용되는 자료입력원 평균임금의 기본급은 2017년 88,096원으로 조사됨.

※ SW기술자 평균임금은 공공분야의 SW사업 추진 시 참고자료로 활용 할 수 있으며, SW기술자 등급 산정 시, 수·발주자간 자율적 협의에 의한 기준을 마련하여 적용할 수 있음.

[시행일] 2017년 9월 1일부터 2018년 8월 31일까지 적용

관련링크 : https://www.sw.or.kr/site/sw/ex/board/View.do?cbIdx=304&bcIdx=38264&searchExt1=

 

웹디자인 잘하는 방법 #1 – 리리코스

웹디자인 잘하는 방법 #1 – 리리코스

 

다른 에이전시에서 제작한 "리리코스" 홈페이지를 똑같이 만들어봅시다.

홈페이지를 똑같이 만들어 봄으로써 그 홈페이지를 제작한 사람들(프로들)의 실력을 고스란히 자신의 것으로 만들 수 있게 됩니다.

이는 홈페이지제작을 배우기 위한 학생 혹은 신입 디자이너한테 피가 되고 살이 되는 유익한 도움이 됩니다.

홈페이지 디자인을 잘 하고싶은 분이 이 포스트를 보고 도움이 되었으면 합니다.

 

1. 홈페이지를 만들기 전 준비과정

– 내가 어떤 사이트를 만들고, 어떤 컨셉인지를 확실히 알아야 합니다. 사용자의 마음을 헤아리기 위함입니다.

기본) 글자를 알아봅시다.

– 홈페이지는 사용자들에게 정보를 전달하기 위함입니다. 그마만큼 읽기가 좋은 글인가 아닌가가 매우 중요한 요소이지요.

홈페이지 텍스트에 사용되는 글꼴, 글자 크기, 글자 자간 등을 알아보는 것이 매우 중요합니다.

글자의 간격에 대한 내용은

http://www.mainart.net/%EA%B8%80%EC%9E%90%EC%9D%98-%EC%9E%90%ED%8F%89/

여기를 참조하시면 됩니다!

 

다음은 그리드를 딸 사이트의 글꼴을 알아보는 방법입니다.

먼저 그리드를 만들 사이트의 글자 위에 마우스의 우측 키를 누른다음 검사를 클릭합니다.

그런 다음, 가운데 보이는 창 위에 마우스를 올리면 오른편에 저렇게 font-family가 뜨게 됩니다. font-family에 써있는 폰트들이 바로 이 사이트에 쓰인 글꼴이죠.

이 사이트에서는 여러 폰트가 쓰여서 그런지 많이 적혀있네요. 보통 저렇게 많을 땐 하나씩 비교해 본 후 가장 예쁜 폰트를 사용합니다.

자 이제 글자의 자평, 글꼴 알아보는 방법에 대해 알아보았으니 타이포그리드에 대해 알아봅시다.

기본2) 타이포 그리드란?

– 방금 말한 글자의 자간, 장평, 행간을 이용하여 홈페이지에 삽입하는 글자 배열을 말합니다.

처음에는 사이트의 글자 장평, 크기, 글꼴 등을 전부 분석하여 똑같이 따라해봅시다.

똑같이 따라한 후에는 타이포 완성을 위해서 원본 이미지를 전혀 보지 않고 오직 텍스트만 따와서 글자를 넣는 연습을 해봅시다.

이렇게 말이죠. 저도 많이 부족해서 그런지 앞에 쓰인 글모양보다는 가독성이 많이 떨어지네요.

그렇게 하면 이 사이트의 타이포를 전부 흡수하실 수 있게 됩니다.

 

1) 키워드 리서치

– 먼저, 내가 제작한 사이트의 소비자가 검색을 어떻게 할 것인가를 생각하고, 키워드 정보 등 가능한 100개 이상의 레퍼런스 수집합니다. tip> ex) 00자동차 가격, 00자동차 성능, 00자동차 기능 등

2) 이미지맵

-상업용/비상업용 등 구분하지 않고 내가 만들 홈페이지에 쓸 이미지를 가능한 많이 찾습니다. tip> 상업용과 비상업용 파일을 분리하면 나중에 상업용 사이트를 만들기 편합니다.

3) 벤치마킹사이트

– 벤치마킹할 사이트의 기준은 우선, 가독성 좋고 깔끔한 사이트가 좋습니다. 비쥬얼 및 효과도 중요하지만, 그보다 처음 사이트에 접근한 소비자가 한 눈에 이해하고 보기 쉬운 사이트가 가장 중요합니다.

– 가이드(그리드)를 만듭니다.

– 카피를 준비합니다.

– 모아 두었던 이미지를 대입합니다.

– 완성

 

2. 홈페이지 가이드라인

: 보통 디자인부터 바로 들어가시는데 그 전에 디자인 구조,위치,크기부터 먼저 잡는게 좋습니다. 구조를 잡고나서 디자인 작업을 들어가면 되겠습니다.

<< 홈페이지 가이드라인 잡기 tip – photoshop >>

– 전체적인 가이드 톤은 회색으로 잡는 게 좋습니다.

– 글씨( slide, banner, img 등 )의 크기는 작고 얇은 흰색 혹은 눈에 튀지 않는 색으로 설정합니다.

– 레이어를 순차적으로 정리 한 후(header, main, content, footer 등) 차례대로 원뎁스, 투뎁스, 쓰리뎁스를 정의해 줍니다.

   1뎁스(depth)(:) (부모 개념)

   2뎁스(depth)(::) (자식 개념)

   3뎁스(depth)(:::) (자식의 자식 개념)

뎁스 예시

– 메뉴 부분은 다 같이 그룹핑해서 게 작업하는 게 편리합니다. ex) 회사소개 제품소개 ~~ > 하나의 텍스트 레이어로

– 보통 메인 디자인은 최소 3일에서 많게는 5일까지 걸립니다. 급하게 빨리 하시려는 것 보다는 시간을 여유있게 두고 퀄리티가 나오는 편이 더 좋습니다.

– 가이드라인은 최대한 줄입니다.

– 이미지는 절대 쓰지 않고 칸으로 씁니다.

 

후에 이렇게 이미지를 넣으시면 됩니다.

완성!

  http://www.lirikos.com/kr/ko

모바일개발

모바일의 정의

통신이 되는곳에는 시간과 장소에 구애없이 어디든 데이터 전송이 가능한 모바일(Mobile)

 

모바일이란

모바일은 「이동성이 있는」이란 의미의 형용사이다. 그러나 최근에 와서는 가정이나 회사 이외의 장소에서 휴대용 정보 단말기를 가지고 다니면서 인터넷이나 전화 회선을 통해 정보를 주고받는 것을 말하며, 휴대용 정보 단말기 자체를 모바일이라고도 한다.

-[네이버 지식백과] 모바일 [MOBILE] (컴퓨터인터넷IT용어대사전, 2011.1.20, 일진사)

 

모바일의 필요한 요소

HTML5 + CSS3

-HTML5를 활용하여 구조적인 Markup을 설계할 수 있습니다.

-CSS를 활용한 디자인 설계 및 유지보수할 수 있습니다.

-CSS3 Animation을 활용한 Dynamic 콘텐츠를 제작할 수 있습니다.

-모바일 및 다양한 Device를 위한 One Web을 구현할 수 있습니다.

javaScript

JavaScript의 특징적인 문법을 효과적으로 학습하여 개발자라면 반드시 숙지해야 될 JavaScript 핵심을 실무에 활용한다.

-JavaScript식으로 생각할 수 있는 힘을 갖는다.

-JavaScript 객체 지향 프로그래밍 기법으로 Client Side 뿐만 아니라 Server Side 어플리케이션을 개발할 수 있다.

-단위테스트와 디버깅 기법을 익혀 대규모 JavaScript 기반 애플리케이션을 개발할 수 있다.

-HTML5, CSS3, JavaScript Framework(JQuery), WebApp 등 관련 차세대 기술을 쉽게 습득할 수 있다.

-Document 내의 요소에 접근하고 요소를 생성하고 조작할 수 있다.

-AJAX 기법을 이용해 서버와 통신할 수 있다.

jQuery

-JQuery UI 이용해 빠르게 복잡한 화면 UI를 생성할 수 있다.

-JQuery Effect로 다양한 화면 효과를 처리할 수 있다.

-JQuery Event를 이용해 이벤트 처리를 효과적으로 할 수 있다.

-JQuery를 이용해 HTML 요소를 조작할 수 있다.

-JQuery Selector를 이용해 Document 내의 요소들을 빠르게 찾을 수 있다.

-JQuery의 Ajax 기능을 이용해 서버와 통신할 수 있다.

-다양한 JQuery Plugin을 찾아서 이용할 수 있다.

-웹사이트, webapp, 모바일 웹까지 효과적으로 개발할 수 있다.

 

모바일 웹사이트

1. 현대백화점

www.ehyundai.com

3. 29cm

www.29cm.co.kr

워드프레스제작

워드프레스제작

워드프레스 정의

워드프레스란?

국외에서 개발된 CMS(Content Management System)으로서 오늘날 블로그와 같은 웹 콘텐츠를 손쉽게 관리할 수 있는 툴입니다. 사용자가 관리모드를 통하여 웹상에서 직접 웹페이지를 구축 가능하고 운영이 가능하며 웹호환, 웹표준을 지키며 모바일에 최적화가 되어있다는 장점이 있습니다. 플러그인과 테마에 따라서 기업 소개용 홈페이지, 쇼핑몰, 웹진, 블로그, 커뮤니티 등 다양한 형태로 쉽게 변형이 가능한 솔루션입니다. 워드프레스제작, 검색 최적화 SEO 기능이 있어 검색엔진에 우선적으로 노출됩니다.

 

워드프레스의 장점

1. 검색엔진 최적화 (Search Engine Optimization, SEO)

검색엔진 최적화란, 검색결과에 따라서 순위를 점하는 방법입니다. 예를 들어 현재 내가 “가방”을 판매하고 있는 쇼핑몰이라면 인터넷에 “가방”을 검색했을 때 가장 최상단에 노출되는것을 말합니다. 워드프레스제작 검색했을 때 제일상단에 위치한 키워드를 말합니다. 이렇게 되면 사용자가 접근하기 쉬워져, 좀 더 유리한 고지에서 사업을 시작할 수 있는 것입니다. 

2. 컨텐츠 관리 시스템 (Content Management System, CMS)

일반적으로 글, 사진, 동영상은 업로드를 통해서 파일을 등록합니다. 같은 사진을 예를 들어 다시 똑같은 이미지를 등록하기 위해서는 전에 등록했던 이미지를 찾아서 등록해야합니다. 하지만 워드프레스는 그전에 등록된 사진, 동영상 파일들을 라이브러리를 통해서 저장해두고 편집 및 삭제를 할 수 있는 기능을 담아두고 있기에 초보자들에게 좀더 쉽게 다가갈 수 있습니다. 워드프레스제작은 메인아트입니다.

3. 유지 관리의 효율성

워드프레스제작을 할 때는 페이지 수정/삭제/등록 그리고 상단 메뉴 수정/삭제/등록 등 지금까지는 이 워드프레스제작을 할 때 개발자들이 처리해 왔습니다. 하지만 워드프레스제작을 할 때 이용자들의 마음을 충분히 이해하고 반영하기 위해서 코딩을 모르는 초보자들도 직접 관리할 수 있게 유지보수가 좀더 용이해졌습니다. 업체같은 경우 이는 곧 시간과 돈의 절약을 통해 많은 이익을 얻을 수 있게 됩니다.
>> 유지보수 바로가기

4. 반응형웹 지원

PC 테블릿, PC 모바일 등 가로 해상도에 따라서 즉각 반응해 사용자들에게 최적의 해상도로 보여 줄 수 있는 기능이 자동으로 탑재되어 있습니다. 이는 비용과 시간적인 측면에서 여러모로 유리한점이 많다고 생각합니다. 즉 PC용 디자인, 테블릿PC용, 디자인 모바일용 디자인 3개를 따로 만들 필요 없이 하나의 레이아웃으로 모든 해상도를 표현해 낼 수 있는 기능을 지원합니다.

5. 소셜미디어와의 결합

소셜미디어의 대화는 워드프레스로 만든 웹사이트에서 진행 가능하며, 반대로 워드프레스로 만든 웹사이트에서의 대화는 소셜미디어(트위터, 페이스북, 텀블러)에서 가능합니다. 그래서 워드프레스는 최적의 네트워크 마케팅에 상당히 유리한 고지에 서 있습니다.

6. 웹표준과 웹 접근성

웹표준이란 wordl wide web에서 웹사이트 구축, 관리를 위한 표준화된 규격을 말합니다. 기본적으로 웹사이트가 올바른 HTML, CSS, JavaScript로 구현되어 특정 브라우저나 해상도에 의존하지 않도록 하는 것입니다.

웹접근성이란 장애를 가진 사람들도 웹을 이용할 수 있도록 보장하는 것으로, 장애를 가진 사람들이 웹 콘텐츠를 인지하고, 운영하고, 이해하고, 기술에 상관없이 이용할 수 있도록 견고하게 웹컨텐츠를 제작하는 것입니다. 다시 말하면, 일반인, 장애인 모두, 컴퓨터 OS, 브라우저에 관계없이 모든 컨텐츠를 이용할 수 있어야 한다는 것입니다.

워드프레스는 기본적으로 웹표준과 웹접근성을 지원합니다.

 

워드프레스제작 웹 사이트 예시

2. 가현 건축사사무소

워드프레스제작

http://www.gharchi.co.kr

4. 업투씨성형외과

워드프레스제작

http://www.up2c.co.kr

5. 블루버드

워드프레스제작

http://ru.mypidion.com

6. 트릭아이

워드프레스제작

http://trickeye.com

반응형웹제작

반응형웹

반응형웹

반응형웹의 정의

반응형웹이란 – 반응형웹제작

PCㆍTABLET PCㆍMOBILE의 화면 해상도에 따라 화면이 자동으로 반응해서 사용자들한테 최적의 사이즈로 보여주게 하는 것입니다.

 

반응형웹의 기법

1. Fluid Grid

가변성 있는 그리드를 이용해서 해상도를 최적화 시키면 됩니다.
예) 가로(width)값을 픽셀이 아닌 퍼센트(90%) 로 제작해 가로의 크기에 따라서 레이아웃이 변형됩니다.

2. Flexible images

보통 이미지가 가로세로 픽스된 pixel단위로 했지만 퍼센트(%)개념으로 적용되며,
이미지의 가로픽셀값을 기준으로해서 세로가 자동으로 조정되는 기법입니다.

3. Media Queries

미디어쿼리는 각 상황에 맞게 보여줄 때 사용하는 것으로
CSS처리를 다르게 하여 다양한 상황에 최적화할 수 있는 기법입니다.

 

반응형웹 사이트

6. 파리바게트

http://www.paris.co.kr

Portfolio Items