모바일 청첩장 만들기 html - mobail cheongcheobjang mandeulgi html

돌잔치초대장(모바일초대장) 웹으로 만들기

이 포스팅에는 개발과정부터 완성본, 그리고 반영과정까지 모든 것이 상세히 들어 있다.
결과물은 아래와 같다. 디자인은 좀 그렇지만 없는 거 빼고 다 있는 듯하다.
포스팅 과정 중, 개발 과정이 세팅 방법 등이 포함되 있다.
잘만 따라하면, 한두시간 안에 아주 쉽게 모바일 초대장을 만들 수 있을 것이다.
캔디별의 반쪽은 돌잔치 초대장을 만들어 보았다.

최종 결과물, 디자인은 없는 것으로 하자... 원래 디자인을 못한다.

사실 이 포스팅은 몇번에 걸쳐 연재 형태로 만들려 했었다.
1탄도 만들었었다.
그런데 네이버에서 무슨짓을 해도 검색이 안된다.

캔디별님의 블로그 내공을 토대로 원인과 결과를 종합해 보자면,
결론은 네이버 검색 알고리즘이 내 포스팅을 싫어한다.. 라는 것!!!
참고로, 1차 포스팅에서는 소스코드가 난무했었다. 글보다 소스코드가 더 많았던...
이게 이유인 것 같기도 하다.
어쨌던 포스팅이 노출되지 않는다면, 블로그가 흔히들 말하는 저품질이 될 수 있다고 한다.
블로그에 전세사는 입장에서 집주인의 블로그를 망칠 수는 없는 일..

1탄 포스팅은 과감히 삭제했다.
중간 개발 과정을 꽤 생략하고 핵심적인 부분만 이야기 하고자 한다.

대략적으로 현재 유행하는 모바일 돌잔치 초대장의 경우, 원페이지로 구성되 있으며 레이아웃 구성은 아래와 같아 보인다.

ⓐ 아이사진 -> ⓑ초대말 -> ⓒ전화 및 연락처 -> ⓓ주소 -> ⓔ지도 -> ⓕ교통편

1차로 html 파일로 문서화 시킨다.

예쁘게 출력됬다.

2차로 모바일과 웹을 고려하여 css 를 추가한다.

원래 디자인 영역을 담당하는 css 파일은 분리하여 링크하는 것이 개발의 원칙이다.
하지만 개발 편의상, html 파일 안에 css 파일을 직접 작성하기로 한다.
javascript 파일 또한 마찬가지로 원 페이지에 작성토록 하겠다.

현재 개발하는 초대장은 모바일용이다. 그럼 웹브라우저에서는 사이즈가 늘어져 보기 싫게 보일 것이다. 이런 문제를 해결하기 위해, 우선 css 를 추가한다.

head 사이에 style 을 추가하여, 디자인을 담당하는 css 를 사용하겠다고 브라우저에 알려준다.
* { margin:0;padding:0; } 을 추가하여, 브라우저마다 값이 달라지는 현상을 초기화한다.
PC 웹 브라우저에서도 모바일과 비슷하게 보이는 것이 목표이므로, body 의 background 설정과 더불어, 보여질 내용을 감싸고 있는 wrap ID 를 가진 엘리먼트의 max-width 값을 추가하고 중앙정렬 한다.
background-color는 구분을 위해 흰색으로 변경해 본다.

저장 후, pc웹에서 결과를 보자.

원하는 대로 세팅이 잘 된 거 같다.
이제 웹브라우저에서도 모바일웹 화면처럼 늘어짐 없이 보여질 것이다.

애기 사진이 들어갈 곳에 사진을 첨부해 보자.

아이 사진은 구글에서 free 인 이미지를 찾아 등록했다.
index.html 파일이 있는 곳에 아래와 같이 images 라는 폴더를 만들고,
그 폴더 안에 아이 이미지를 1.jpg, 2.jpg, 3.jpg 라는 이름으로 복사해서 붙여넣었다.

사실 이미지 이름은 중요하지 않지만, 한글일 경우 문제가 될 수도 있고 띄어쓰기 또한 문제가 될 수도 있다.
쉬운 파일명으로 변경하자. 그리고 이미지가 들어갈 곳에 이미지 태그를 삽입해 보자.
이미지는 가로 사이즈가 벗어나지 않게 하기 위해 img100 이라는 클래스를 추가하여, 폭을 맞춰준다.

메모장을 저장 후, 결과물을 보자.

현재까지 원하는 대로 결과물이 나온 것 같다.
이 정도까지만 해서, 카톡을 보내도 올 사람은 올꺼다....
라는 말을 삭제해 버린 1탄의 포스팅에서 쓴 거 같다.
하지만, 캔디별님께서 이런 식으로 포스팅을 하면 주인장 권한으로 삭제해 버릴 수도 있다.
그렇기에 이제 꽤나 못할 자신이 있는(?) 디자인을 입혀보자.
괜찮다. 디자인은 주관적인 거니깐.

다됬다. 디자인을 입힌 모바일 초대장을 보자.

css 파일을 삽입하여, layout 및 ui를 구성

아이콘은 외국 사이트인 아이콘파인더를 통해, 무료 이미지를 사용했다.
일반 문서에 style 을 추가함으로써, 디자인은 별로여도 그럭저럭 볼만한 형태가 구성되었다.

우리는 이제 front-end 개발의 꽃이라 할 수 있는 js 로 넘어가려 한다.
우선 지도 넣을 곳에 지도를 삽입해 보자.
맵은 구글맵을 사용할 것이다.
네이버맵과 다음맵은 API 키를 받아야 가능하기 때문이다.

위와 같이 예쁘게 결과물이 나왔다.

구글맵 좌표는 아래와 같이 알아온다.
구글지도를 열고, 좌측 상단 검색탭에 원하는 곳을 검색 후, 해당 위치를 클릭하면
아래와 같은 위치가 나오는데, 이중 아래 빨간 네모안의 텍스트를 복사하여,
붙여넣는다.

아이 사진은 총 3장이다.
사진을 롤링되게 만들어 보자.
우선, jquery 플러그인 중 꽤 좋은 플러그인인 slick.js 를 이용하기로 했다.
프로그램을 세팅 후, 사진이 롤링 되는지 확인한다.

1번. slick.js src 추가, 2번 실제로 파일이 돌아가도록 세팅

참고로, 현재는 총 3장의 아이사진만이 스크롤된다.
추가를 원하면 얼마든지 가능하다.
위에서 images 라고 만든 폴더에 4.jpg, 5.jpg 식으로 이미지를 추가한다.를
이후 아래 이미지 추가 부분에, 우리가 잘하는 컨트롤 C+V 를 통해 태그를 추가한다.

이미지 추가 라고 되 있는 아래쪽으로, images 폴더에 있는 사진 이름과 매칭하여 태그를 추가한다.

이 포스팅에서 소스코드를 건드리는 것은 이것이 거의 마지막이 될 것 같다.

우리는 흔히, 카카오톡으로 모바일 초대장을 많이 받는다.
그런데, 이게 스미싱인지 스팸인지 사람들이 헷갈려 할때가 있다.
카톡에 내가 본낸 초대장이 스미싱이나 스팸이 아닌 것을 알릴 수 있게 해보자.

뭐... 쉽다. 카톡에 링크가 오면 이미지와 설명이 보이는데 이 부분을 세팅해 보자.
카톡은 현재 페이스북의 오픈그래프 태그를 바탕으로 웹주소에서 내용을 간추려 보여준다.
자 세팅해 보자.

facebook open graph 세팅부분, 파란색 테두리 부분은 바뀔 것이다.

한글은 카톡에 들어갈 제목과 내용이다.
아래 og:image 는 카톡에서 보여질 이미지다.
반쪽의 경우에는 이미지 슬라이드에 있는 이미지로 세팅하였다.
가장 아래 파란 테두리는 주의하자.
우리가 웹사이트를 실제로 웹상에 띄우면 url 을 바꿔주어야 한다.

자. 이제 거의 다 왔다.
만든 소스를 웹상에 올려보자.
웹서버가 있다면 웹서버에 올려도 되고,
웹호스팅이 있다면 그것을 이용해도 된다.
하지만 우리는 거의 웹호스팅과 도메인 조차 없을 것이다.

방법이야 상당히 많지만, 우리는 이미 이정도로도 상당히 front-end 개발자이기 때문에, 개발자 답게 github 를 이용할 것이다.

https://github.com/ 라는 사이트가 있다.
개발자의 성지이다. 개발자가 github 를 들어본적이 없거나 이용해 본적이 없다면
득도하였거나, 막 프로그램을 시작한 분일 가능성이 많다.

자.. 회원가입을 하자.
영어 천지다. 우측 상단 signup 버튼을 눌러 계정을 등록한다.
주의할 점은 만든계정.github.io 로 도메인이 생성된다.

회원가입을 완료하면, 메일로 계정을 승인완료하라고 한다.
아래 빨간 테두리의 버튼을 누르면 승인이 완료된다.

github 에서 이메일을 verify 하라고 한다.

완료가 됬으면, 이제는 아래 이미지 대로 따라만 하자.
다 영어다. 쉽지 않다면 그냥 이미지를 보면서 따라하기만 하면 된다.

꼭 자신의계정.github.io 가 아니면 안된다. 궁금하면 다른 걸로 해 보자 :-) 삽질을 경험해 볼 수 있다.

뭔가 수정할 내용들이 나오는데 그냥 pass 한다.

이와 같은 페이지가 나올 것이다. publish 하자.

자!! 끝났다. 이제 아래와 같은 페이지를 볼 수 있다.

소스를 수정해 보자.

index.html 이라는 부분을 클릭한다.

우리가 만든 소스를 붙여넣고, 저장한다.
소스는 설명이 끝난 후, 공개하도록 하겠다.

그런데 문제가 있다.

중요한 아이 사진이 안 나온다. 음... github 에서 웹으로 디렉토리나 파일을 올릴 수 없다.
개발도구를 써야 하는데, 사실 github 보통 설명으로는 이게 쉽지 않다.

어쩔 수 없이, 꼼수를 쓴다.

에디터가 나올 것이다. 이미지를 드레그하여 첨부한다.

사진의 갯수만큼 이미지가 첨부되었다. https 부터 시작되는 주소를 복사한다.
총 3장이니, 3개의 주소가 있겠다.

사진 갯수만큼 이미지가 첨부되었다. https 부터 시작되는 주소를 복사한다.

복사한 이미지 주소를 교체해 준다.
github 에서 연필모양을 클릭하여 교체한다.

카카오톡으로 보낼 사이트 주소와 보여지게 될 이미지도 교체하자.

음... 잘 나온다.

그런데 카톡에서 확인해 보니, .io 라는 도메인에서는 이미지와 텍스트를 안 만들어 주네??? 음...
네이버 링크에도 잘 나오는데 참....;; 이래서는 스미싱과의 구분에 약간의 문제가 생기지만...
뭐 별 수 없을 것 같다. 카톡을 보내면서 설명을 조금 잘 하는 수 밖에 :-)

소스는 아래 링크를 들어가면 있다.
https://raw.githubusercontent.com/rmsidtest/rmsidtest.github.io/809d7bb24c2cc5ce98752907cc34a68081679efb/index.html

원페이지 구성이므로, 소스파일을 복사해서 index.html 파일로 만들어 바탕화면에서 실행해 보자.
위와 같이 나오면 OK 이다.
그 뒤 위의 개발 방식을 보면서, 초대장을 만들면 되겠다.

이 포스팅에는 간단히 한두시간 만에 모바일 초대장을 만들어 보았다.

실제로 사용하려면, index.html 파일의 한글로 된 부분은 싹 교체를 해야 할 것이다.
또한, 이미지 파일 경로를 잊지 말고 바꾸자. 다른 애기 사진이 나오면 곤란하니깐.
마지막으로, 전화번호와 이메일을 바꾸는 것을 잊지 말자.

이 소스는 오픈해 두겠다.
누구나, 상업적(사고파는용도)만 아니라면 그냥 편하게 이용하시면 될 것 같다.
전문 업체에 비하면, 디자인도 꽝인데다 별거 아닌 소스코드라, 누가 돈받고 팔겠냐만은...
주변에 디자인 잘 하는 분이 있으면, 꾸며서 재배포 하셔도 좋을 것 같다.

PS. 웹사이트 제작 관련 포스팅은, 규모가 작아도 꽤 힘든 것 같다.
캡쳐도 많이 해야 하고... 앞으로 이정도 양을 포스팅하긴 힘들 거 같다.