개발자도구여는 법 

- Ctrl+Shift+I

- 마우스 우 클릭 > 리스트에서 '검사' 클릭



Device Mode

'디바이스 아이콘' 클릭하면 Device Mode 접근 가능


디바이스 사용자 추가 방법은

Responsive옆에 '▼' 클릭 한 후 나오는 리스트에서 'Edit..' 클릭



여기에서 디바이스 추가 및 커스텀이 가능하다.


Add custom device... 클릭해서 수치 넣고 Add 


리스트에서 확인 가능!


저 막대기 바를 눌러서 크기 변경 가능


옵션 아이콘을 눌러서 Show media queries 누르면

사용된 미디어 쿼리가 확인 가능.



마우스 올려두면 확인가능하지만

파란색이 max-width 고 주황색이 min-width


옵션에서 show rulers누르면



이렇게 설정됩니다.



그리구 capture screenshot을 하게 되면

현재 페이지의 스크린샷을 저장!



현재 페이지 캡쳐가 필요할때 유용할 것 같다~










호스팅, 도메인 등록 방법 알아보기


호스팅 업체 등록 시 워드프레스 설치를 자동으로 해주지 않는다면 어떻게 설치를 하는지에 대해 알아보겠습니다.


FTP란? 

파일 전송 프로토콜은 TCP/IP 프로토콜을 가지고 서버와 클라이언트 사이의 파일 전송을 하기 위한 프로토콜이다. 파일 전송 프로토콜은 TCP/IP 프로토콜 테이블의 응용 계층에 속하며, 역사는 오래 되었지만 지금도 인터넷에서 자주 사용된다............ 블라블라  - 출처 : 구글사전


간단히 말하면 파일 전송 프로토콜입니다.

FileZilla는 웹 서버에 내가 소스(파일,이미지, 동영상등..)를 올릴 때 사용하는 프로그램입니다.


1.
워드프레스 파일 설치
워드프레스 홈페이지에 접속 합니다. 
https://wordpress.org/ 
https://ko.wordpress.org/

두 사이트 모두 워드프레스 공식 홈페이지이며 워드프레스 파일을 다운로드 할 수 있습니다.


메인 페이지 좌측 상단에 'get wordpress' , '워드프레스 얻기' 버튼을 클릭하여 다운로드 페이지로 이동합니다.




다운로드 페이지에서 가운데에 있는 다운로드 버튼을 클릭하면 워드프레스 파일을 받을 수 있습니다. 
(버전은 다를 수 있습니다)



받은 파일 압축을 풀어주면 압축이 풀린 파일이 받아지는데, 

이 파일이 서버에 올라가야 워드프레스 설치가 완료되는 것 입니다. 


이 파일을 FTP로 올리는 작업을 할 것 입니다. (그러기 위해서는 도메인,호스팅 등록 작업을 진행 한 후어야 합니다.


2.

FTP 프로그램을 다운로드


서버에 워드프레스 파일을 업로드하기 위해서는 FTP 파일이 필요한데,

저는 FTP 파일 중에 '파일질라' 프로그램을 이용 할 것 입니다.

이 프로그램을 이용하는 이유는 사용하기 쉬우며, 유명하며, 오픈 소스 (자유 소프트웨어) = 무료 이기 때문입니다.




다운로드 받기 위해서 검색 포털에서 '파일질라 다운로드' 검색 후에 download 페이지로 이동해줍니다. ( 다운로드 바로가기 )




다운로드 페이지에서 자신의 운영체제를 확인 한 후 다운로드를 진행해줍니다.

Download FileZilla Client 클릭 > Download 클릭


다운로드 완료 후 다운 받아진 .exe 파일을 실행 해 줍니다.

 FileZilla 다운로드 매니저가 실행됩니다.



I Agree 클릭 



사용 옵션 선택 후  Next > 클릭

(해당 컴퓨터 모든 유저가 사용할 것인지, 오직 나만 사용할 것인지를 결정하여 진행하면 됩니다.)



components 다운로드 되는 것 같은데 그냥 Next >



다운로드 경로를 변경하고 싶다면 변경하고 아니라면 Next >



Next > 



저기 체크되어있는 부분 해제하고 Next >  

( Avast Free Antivirus 프로그램 다운로드 받고 싶다면 체크 한 상태로 Next > )



저기 체크 부분 해체 후 Next > 

(Opera 브라우저 다운로드 받고 싶다면 체크 한 상태로 Next > )



다운로드 로딩 창으로 변경이 되었다가(순식간에 되버려서 캡쳐를 못했습니다.)

다운로드가 완료되면 Finish 버튼이 있는 창으로 변경되는데 Finish 버튼을 클릭해 줍니다.



파일질라 프로그램 접속 화면 입니다. 


여기서 내 호스팅 서버에 연결을 하려면

빨간 박스 상자 안에 있는 호스트, 사용자명, 비밀번호, 포트정보를 입력한 후에 빠른 연결을 눌러주면 됩니다.

포트 같은 경우는 공백으로 둬도 됩니다.(공백일 경우 기본 포트 (21) 사용합니다)


호스트, 사용자명, 비밀번호 등의 정보는 본인이 호스팅등록을 할 때 입력하게 됩니다.


그 정보를 이용해서 FTP 연결하면 됩니다.



연결이 되었다면 좌측은 내 로컬(내 컴퓨터)이고 우측은 호스팅 서버입니다.(이미지는 서버연결이 안 된 상태라 문구가 뜨고 있습니다)

서버 쪽 파일 루트는 아무것도 없는 상태이기때문에 '/' 이렇게 나와있을 것입니다. 


워드프레스 파일을 서버에 올려서 설치를 완료하려면 

좌측의 내 로컬에 있는 wordpress 폴더 루트를 찾아서 파일을 드래그해서 우측에 있는 내 호스팅 서버에 드롭해 주면 됩니다.

혹은 파일 우측마우스 > 업로드 버튼 클릭을 해주면 워드프레스 설치 완료입니다.





1. ctrl + x 누르면 옵션 창 뜹니다.


2. Windows PowerShell(l) 클릭하거나 l(L) 누르면 창이 하나 뜹니다.


3. 'winver' 친 후에 엔터를 누르면 버전 정보가 적혀있는 팝업창이 뜹니다.




웹 벤치마킹(Benchmarking)



'기업이 우수한 타기업의 제품이나 기술, 경영 방식을 배워서 응용하는 일. 미국 기업에 처음 도입되어 다른 나라에 확산되고 있는 새로운 경영 수법임.' 

 - 출처 : 구글 사전

간단히 말하면 다른 사이트의 디자인, 기획, 기술 등을 참고해 사용한다는 것 입니다.


그러기 위해서는 먼저 내가 어떤 홈페이지를 제작할 것인가를 정해야 합니다.

정하지도 않고서는 어떠한 곳도 벤치마킹 할 수 없습니다.

(카페 차릴 건데 자동차 정비소 디자인 보고 있으면 시간낭비죠?)


저는 강아지를 주제로 잡았다고 예시를 들겠습니다. (쇼핑몰x)


1.
관련 키워드를 검색하는 방법

주제의 키워드를 검색 포털(네이버, 구글, 다음 등)에 검색합니다. 


- 강아지 

- 펫

- 애완견 


검색해보겠습니다.


검색하고 나온 사이트들을 방문하여 벤치마킹하면 됩니다.


2. 

웹 사이트들을 소개, 평가하는 홈페이지들을 참고

EX ) 굿디자인 웹  , 디비컷 


상단 - 제작사별, 타겟층별, 표현방법, 디자인컨셉, 색상별 확인 가능합니다.

좌측 - 카테고리로 정리되어 있는 부분 확인 가능합니다.


만약 원하는 카테고리가 없다면 상단에 제작사별, 타겟층별, 표현방법, 디자인컨셉, 색상별에서 본인이 원하는 것을 골라 찾아봅시다.

저는 강아지가 주제인데 애견관련 카테고리가 없었기 때문에 상단의 디자인 컨셉에서 골랐습니다.


강아지 = 귀여움 




자 이렇게 열심히 사이트를 찾았지만 무엇을 벤치마킹 하라는 건지...라고 생각이 드실 것 입니다.


간단히 몇가지만 정리해보면 도메인주소, 홈페이지 테마(색상), 레이아웃(메인, 서브페이지, 팝업), 디자인, 콘텐츠, 기능 등...이 될 수 있습니다.

(저는 기획자 + 디자이너가 아니기 때문에 이 정도만...)

※ 참고하는거지 통째로 베끼면 안됩니다.


1. 도메인주소

도메인 주소는 무엇을 참고하냐면? 강아지관련 사이트면 puppy, dog 관련 키워드가 들어가면 사용자가 기억하기 쉽다 = 사이트 주소 입력 방문이 쉽다.

www.dog.com = 찾아오기 쉽겠죠?

www.dogzzang.com = 찾아오기 쉽겠죠?


이러한 점을 이용하거나.. 아니면 내 사이트명과 사이트 주소을 맞추어도 됩니다.

많은 사이트들이 그렇습니다.


네이버 = naver.com

다음 = daum.net

구글 = google.com

삼성 = samsung.com


2. 테마, 레이아웃, 디자인, 콘텐츠, 기능 등

'카카오헤어샵'과 '튼튼 쑥쑥 어린이 박람회' 사이트를 예로 들어보겠습니다. (시간이 지남에 따라 사이트 디자인이 다를 수 있습니다)


빨간 영역은 큰 레이아웃으로 대충 나누어 둔 부분입니다.


- 카카오헤어샵은 카카오의 테마에 맞추어 노란 색상이 주를 이룹니다.

- 제품 소개페이지다보니 서브페이지들이 존재하지 않고 단일 페이지입니다. (메인하나)

- 메인 이동이 간편하게 오른쪽 동그라미 네비게이션이 존재합니다.

  클릭 시 해당 영역으로 스크롤 이동.(기술)

- 공유를 목적으로 둔 소셜공유 버튼이 존재합니다.


'튼튼 쑥쑥 어린이 박람회' 사이트 입니다.

빨간 영역은 큰 레이아웃으로 대충 나누어 둔 부분입니다.


- 최상단에 메인 네비게이션이 존재합니다.

  페이지가 존재하기 때문에 필요합니다.

- 원하는 페이지로 갈 수 있는 서브 네비게이션이 있습니다.

  박람회 관련된 페이지들을 다이렉트로 갈 수 있게 해두었습니다.

- 서브페이지들을 참고 할 수 있습니다. 

  회사소개페이지, 게시판페이지 등..

- 노출되길 원하는 게시판이 있기 때문에 메인에서 한 눈에 볼 수 있도록 해두었습니다.

- 주최, 후원하는 회사 또는 단체의 로고를 메인에 넣어두었습니다.

- 회사 카피라이터를 하단에 작성해두었습니다.


카카오 헤어샵과는 다르게 튼튼쑥쑥 어린이 박람회 사이트의 레이아웃 박스가 여러개로 나뉘는 이유를 생각해보는 것도 좋습니다.

제 생각으로는 카카오헤어샵 사이트는 단지 제품을 소개, 광고하는 페이지이기때문에 심플한 것이고 

튼튼쑥쑥 어린이 박람회 사이트는 카카오헤어샵과는 목적자체가 다르기 때문이라고 생각합니다.(많은 정보가 필요)


이런식으로 크게크게 나누어서 레이아웃을 참고하다 보면 내 사이트는 어떻게 해야 좋을 것일까 어떤 게 필요할까 등이 어느정도 보일 것 같습니다.


또한 홈페이지 주제 말고 목적도 중요합니다.

강아지를 주제로 삼고 목적이 없다면 둘 다 사용가능하기 때문에 벤치마킹이 힘들어집니다.


강아지 소개 사이트 = 카카오 헤어샵

유기견 모임 사이트 = 쑥쑥 어린이 박람회


주제 + 목적 등을 결정하여 벤치마킹해야 좋은 결과를 얻을 수 있을 것 같습니다!


+ Recent posts