와이어 프레임 와이어 프레임이란? 웹 또는 앱 프로젝트를 진행할 때 필요한 과정 중 하나로 웹 페이지의 구조를 제안하기 위한 화면 설계도입니다. 즉 디자인이 들어가기 전 단계에서, 선(wire)을 이용해 윤곽선(frame)을 잡는 것을 말합니다. 단순한 선과 회색박스들로 보일 수 있겠지만, 디자인의 컨셉, 고객의 요구사항, 콘텐츠들의 기능 요소를 모두 파악하여 전략적으로 설계되어야 하므로 중요도가 높습니다. 또한, 이 와이어프레임이 잘 갖춰져 있어야 디자이너와 웹 퍼블리셔, 개발자 그리고 클라이언트가 서로 원활히 소통할 수 있게 됩니다. 와이어 프레임의 장점과 단점 와이어 프레임의 장점 건축현장을 시각적으로 표시 와이어프레임은 웹 사이트 또는 소프트웨어의 청사진과 같으며 제품 구조를 시각적으로 표현합니다..
그리드 시스템 그리드 시스템이란? 그리드 시스템(Grid System)이란, 페이지 콘텐츠를 논리적이고 일관성 있는 질서와 구조로 디자인할 수 있도록 돕는 그래픽 시스템을 말합니다. 여기서 그리드(Grid)는 사전적 의미로 '격자무늬' 또는 '격자판'을 의미합니다. 그리드 시스템은 1970년대 중반부터 건축, 일러스트레이션, 책, 신문과 같은 다양한 분야에 사용되어 왔는데, 인터넷 보급 후 기술의 발전에 따라 웹 디자인에도 사용되기 시작했습니다. 웹 디자인에서 그리드 시스템은 페이지의 디자인 영역을 나누고, 각 영역에 디자인 요소를 배치하는 데 사용됩니다. 그리드 시스템은 웹 디자인에 있어 아래와 같은 긍정적인 역할을 합니다. -컬럼 단위로 요소를 구성하므로 많은 양의 콘텐츠도 정돈된 느낌을 준다. -격..
SE0 검색엔진 최적화 (SEO)와 시맨틱 태그의 연결고리 웹사이트는 검색엔진에 노출 되는게 매우 매우 중요하다. 검색엔진에 노출되지 않는 웹사이트는 접속하는 사람도 없으니까 당연한 이야기다. 검색엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집한다.(이것을 크롤링이라 하며 검색엔진의 크롤러가 이를 수행한다.) 기본적으로 이 검색엔진봇은 어떤 컨텐츠의 구조를 이해하지 못한다. 텍스트를 읽을 수는 있지만 컨텐츠의 각각이 어떻게 연관되어있는지를 인식하지 못한다는것이다. 그래서 의미 없는 구조의 텍스트들에 의미를 부여하기 위해서 시맨틱 태그를 사용해서 검색엔진 봇에게 텍스트의 중요도 차이를 인식시켜야 한다. 이에 대해 검색엔진 봇은 검색 사이트 이용자가 검색할 만한 키워드를 ..
웹 표준 웹 표준이란 말 그대로 웹에서 표준적으로 사용되는 기술이나 규칙을 의미하며, 웹 사이트에 접속한 사용자는 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동해야함을 의미한다. 웹 접근성 웹 접근성은 신체적 차이나 장애 여부와 상관없이 누구나 원활하게 웹 페이지를 이용할 수 있어야 한다를 의미하는데 시각장애인의 경우 화면을 눈으로 볼 수 없기 때문데 '스크린 리더'라는 별도의 소프트웨어를 컴퓨터에 설치하여 음성으로 웹 페이지에 담긴 정보를 이해한다. 하지만 스크린 리더는 스스로 웹 페이지의 내용을 분석하지 못한다. 예를 들어 '메뉴' 라는 텍스트 대신 메뉴라고 그려진 이미지를 사용할 경우 비 시각 장애인의 눈에는 메뉴라고 인식이 가능하지만 소프트웨어의 입장에서는 그..
HTML HTML은 HyperText Markup Language의 약자로 웹 페이지를 구성하는 마크업 언어입니다. 자바스크립트와 CSS 등을 같이 사용하여 본문과 외관의 배치를 정의할 수 있습니다. 태그(tag) HTML 태그는 태그 이름을 꺾쇠 괄호()로 감싸서 표현합니다. HTML 태그는 보통 시작 태그(start tag, opening tag)와 종료 태그(end tag, closing tag)의 한 쌍으로 구성됩니다. 종료 태그는 시작 태그와 전부 똑같지만, 태그 이름 앞에 슬래시(/)가 존재합니다. 태그에 따라 시작 태그만 있고 종료 태그가 없는 태그도 존재합니다. HTML 문서의 제목을 정의하며, 다음과 같은 용도로 사용됩니다. - 웹 브라우저의 툴바(toolbar)에 표시됩니다. - 웹 브..