스마트 문화 콘텐츠의 기본적인 콘셉트는 프로젝트를 기획하면서 알게 모르게 자연스럽게 만들어진다.그렇기 때문에 콘셉트를 정하기 위해 가장 먼저 해야 할 일은 앞서 작성한 프로젝트 기획서를 검토하고 프로젝트 기획서 안에 이미 녹아들어 있는 콘셉트를 발견하는 것이다. 그리고 발견한 콘셉트를 구체적으로 정리하여 확장 및 발전시켜 나가야 한다. 하나의 프로젝트 기획에서 다양한 형태의 결과물 만들어질 수도 있다. 콘셉트를 어떤 방향으로 확장·발전시키느냐에 따라 전혀 다른 결과물이 나올 수 있기 때문이다. 이와 같이 하나의 자원을 토대로 다양한 사용처를 개발해 내는 것을 OSMU(One Source Multi-Use)라고 한다.
웹 폰트 Web Font | 굵은 제목용 어그로체, 평창체 | 본문 및 문단용 프리스텐다드 서버에 저장된 서체를 연결해서 웹문서,앱에 반영한 서체를 웹폰트라고 한다. 해당 서체가 설치되지 않은 기기에서도 해당 서체를 볼 수 있다. 컴퓨터에 기본적으로 설치되어 있는 글꼴인 웹 안전 폰트(web safe font)만으로 웹페이지를 구성한 것에 비하면 웹 디자이너들에게는 정말 달가운 발전이 아닐 수 없다. 특히 모바일에서 큰 장점으로 작용하는데, 같은 제조사라도 폰 기종마다 탑재된 서체가 다르기 때문에 웹 쪽에서 서체를 적용하기 어려웠던 문제가 단번에 해결된다.
컬러를 직접 색이름, 헥사코드로 정하기 어려운 경우에 구글에 컬러피커라 검색, 포토샵에서 컬러픽커를 통해 색을 적용할 수 있다.
주된 웹문서 편집기는 서브라임 텍스트로 진행합니다.
아래 그림이나 배너를 클릭하고 운영체제에 맞게 다운로드해 설치를 합니다. macOS는 하나의 파일로 설치하고, Windows는 설치형 / portable version은 zip파일로 무설치형입니다. 실습하는 PC에 설치하는 것이라면 Windows를 클릭해서 원활하게 설치하고 바로 사용할 준비를 하세요.
웹에디터 서브라임텍스트의 사용법 1. 작업하려는 컴퓨터의 디렉토리(폴더)를 아래와 같이 생성한다. 기본 html폴더를 생성하고 / 내부에 필요한 imgs, css, js 등의 폴더를 생성한다. (html폴더가 바로 프로젝트 파일이라 생각하고, 내부의 소스들을 구분한것과 동일하다.) 2. 서브라임 텍스트 프로그램을 실행하고, Ctrl+N 새 문서를 우선만들고, Ctrl+S 파일을 w01.html 과 같이 확장자를 html로 지정해 저장한다. (웹에디터는 웹문서외에도 메모장, 프로그램, 스트립트 파일로 저장하기에 분명한 확장자를 지정해야 한다.) 3. html문서의 첫줄에 <html 이라 입력하면, 어시스트가 관련 태그를 추천하고 해당 문서의 기본틀을 서브라임텍스트는 생성해주면서 코딩이 시작된다. 4. 기본적인 태그를 입력하면 어시스트가 관련 태그목록을 보여주니 선택하면 바로 입력된다.
영상제작처럼 프로젝트 파일이 html파일과 같고... html 확장자 잊지말고, 다음 관련된 소스들을 하부 폴더에 준비해서 가져와 코딩작업을 하는 것이구나!
Web(App)Tools ////////////////////////////// ◆웹에디터, 웹문서 편집기 [서브라임 텍스트] ◆웹폰트, 웹용 전용서체 [눈누-서체] ◆파일전송 프로토콜 FTP, 웹문서 업로드/다운로드 [파일질라] ◆그래픽프로그램 [포토샵,일러스트,프리미어 프로] Web 기본지식 ////////////////////////////// ◆도메인(Domain) - 홍길동. 웹브라우저를 통해 입력한 홈페이지 이름. naver.com와 같이 호스트명(영어+숫자)을 인식하기 쉬운 영어이름으로 정한 것 ◆웹호스팅(Web Hosting) - 홍길동이 주거하는 곳. 전용회선이 연결된 서버컴퓨터에 일부 사용공간을 임대하는 것. USB처럼 일정한 HD저장공간을 빌려서 사용한다. 내 컴ㅍ
스마트문화앱 콘텐츠 설계
HTML은 무엇인가?
하이퍼텍스트 마크업 언어(HyperText Markup Language, HTML)는 웹 페이지를 위한 지배적인 마크업 언어다. HTML 및 Script 언어를 입력하는 것을 코딩(Coding) 작업한다고 한다.
웹관련 분야는 웹디자인(그래픽프로그램으로 디자인 시안 제작), 웹퍼블리싱(디자인 시안을 기반으로 코딩작업), 웹프로그래밍(다양한 프로그램 언어로 커뮤니티환경을 조성) 3개의 분야로 나눠진다.
웹관련된 직업군 ◆웹디자이너는 시각적인 시안을 디자인하는 사람으로 클라이언트의 제작의도에 맞게 화면의 구성인 레이아웃, 로고, 배너 등 디자인만을 하는 직군입니다. ◆웹 퍼블리셔는 웹디자이너가 구상한 디자인을 HTML, CSS, JavaScript로 실제로 코딩하는 직군을 말합니다. 디자이너의 의도대로 1px의 오차도 없이 그림형태의 시안을 정확한 코딩을 통해 웹문서와 관련된 스타일, 기능을 구현하는 것이 특징입니다. ◆프론트 엔드 개발자는 HTML, CSS, JavaScript를 활용하여 웹 페이지의 구조와 디자인 뿐만 아니라 API를 통해 서버와 데이터를 주고 받는 것까지 구현하는 사람을 뜻합니다. ◆백 엔드 개발자들은 프론트엔드 개발자가 JavaScript를 이용하여 전달해 준 형태를 서버에서 데이터를 잘 받아서 사용자에게 보여주고, 또 사용자가 입력한 데이터를 서버에 잘 전달해주는 오리지널 웹프로그래머의 영역의 일을 합니다. 회원/데이터/서버에서 프로그래밍 담당하는 책임자이다. 그누보드5 등의 게시판 프로그램들이 프로그래머들의 직군을 위협하고 있다. 여러분의 목표가 되는 직군입니다.
HTML의 구조
<html>로 시작해서 </html>과 같이 슬리시로 구분하며 종료를 한다. html내에는 아래와 같은 기본 구조를 갖고 있다. <!DOCTYPE html>는 스마트폰 환경의 html5의 선언부분이며, 크게 머리인 head와 몸체인 body로 구분된다. head에는 페이지 제목, 스타일(CSS), 외부파일 연동하는 부분이 들어가고, 실제 보여지는 부분은 body내에 추가하는 코딩작업으로 구현된다. <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html>
HTML의 교과서적인 웹사이트w3schools.com
웹퍼블리싱관련 많은 저자들이 참고하여 책을 저술하는 사이트로, 태그검색과 예제와 설명이 잘되있는 교본사이트가 바로 더블 유쓰리 스쿨스 닷컴입니다. 링크를 참고해서 진행하니 여러분도 아래 배너를 눌러서 배우면 더 좋겠습니다.
위지위그(WYSIWYG: What You See Is What You Get, "보는 대로 얻는다")의 문서편집기와 유사한 편집기(Editor)를 이용해서 코딩작업을 진행하는데, 다양한 편집기가 있다. Adobe의 Dreamweaver는 표(Table) 및 디자인 구성을 직접보는 위지위그의 대표적인 편집기였으나, 요즘은 검은 화면에 텍스트가 각 구성요소별로 보여지는 서브라임텍스트, 아톰, 비쥬얼 스튜디오 코드 등 편집기들을 주로 사용한다.
본 교육에는 쉽고 빠른 코딩을 위해 Sublime Text 3를 이용해서 코딩교육을 진행하겠습니다. 아래가 공식사이트 다운로드이며, 직접다운로드는 여기를 누르세요.
기본적인 HTML문서 만들어보기를 해보겠습니다. 제목글, 문단글, 이미지삽입, 영상삽입, 하이퍼링크 까지 아래 강의영상을 보면서 따라해봅니다.
Body에 주로 삽입되는 기본 태그들
■ 제목 Heading 크기에 따라 h1~h6 ex) <h1>가장 큰 제목</h1>
■문단 Paragraph 좌로정렬을 기본으로 하는 설명문장의 단락 pex)<p>설명을 입력.....</p>
■구분을 위한 수평선hrex) <hr> ■문단 중 줄내림 Break brex) <br>
■이미지 삽입 이미지imgex) <img src="URL"> URL에는 미디어 소스의 경로를 삽입해 준다. 외부주소(경로)인 다른 홈페이지 예로 픽사베이의 크거나 작은 이미지 위에 이미지주소복사한 외부경로를 src="url"삽입이 편하다. 하지만, url에는 상대주소나 내가 저장한 imgs/a1.jpg 등과 같이 폴더명/파일명 으로 이미지를 삽입할 수 있다. 이때 네트워크가 오프라인 상태에서도내 폴더 내의 이미지는 굳건히 웹문서내에 잘 보여지므로 이미지 파일을 특정폴더에 구분할 수 있는 이름으로 저장하는 것이 기본이다.
■웹문서의 Head구문내 웹폰트 및 이미지, 여백 스타일 CSS 규정 삽입
html 웹문서에 <head> 구문이 끝나기전, </head> 앞에 특정한 디자인 스타일을 삽입해서, 하나의 통일된 디자인 스타일을 규정하는 방법을 주로 사용한다. 아래는 눈누의 서체별 웹폰트로 사용을 클릭하면 뜨는 내용이다. 복사해서 스타일에 반영하면 웹문서의 스타일에 적용되어 멋진 웹폰트로 body 본문을 꾸밀 수 있다.
문서의 여백을 상하 0, 좌우 100px정도주고, 모든 이미지는 300px크기에 모서리는 20px만큼 둥글게 처리한 스타일내용이다. 아래 style 구문을 드래그 복사 후에 </head> 안쪽에 삽입해보세요.
웹문서도 글, 그림, 영상 등이 주된 콘텐츠이다. CSS라는 고유의 스타일이 헤드문에 타이틀 아래 보통 배치되어서 예쁜 웹폰트, 배경색, 글자색, 원하는 배경이미지 등을 활용하면 더욱 멋진 스타일이 됩니다. 중요한 것은 본문 바디태그의 여백등을 정하는 것을 기본으로 시작하겠습니다. 붉은색 태그에 스타일을 활대괄호로 내부에 지정합니다. 설명(주석)이 필요한 경우에는 콘트롤+슬래시(/)로 내부에 글을 남겨도 좋아용. 브라우저에서 볼때 콘트롤 누르며 더하기는 확대, 실제크기는 Ctrl+0 포토샵 맞춤보기와 같다.
글씨색상은 컬러:색상이름 혹은 헥사코드 #ff0000 #f00 red를 말한다. 제목1이 서체를 적용하고, 색을 주고 싶다면 세미콜론 뒤에 이런식으로 입력하면 폰트와 색상을 변경할 수 있다. 배경의 경우는 단순한 색상, 혹은 이미지와 혼합해서 사용할 수 있다. 백그라운드는 색, 백그라운드-이미지는 이미지이다.
