brunch

매거진 페이퍼

You can make anything
by writing

C.S.Lewis

by Subi Song Nov 21. 2018

코드 한 줄 몰라도 홈페이지를 만든다?

한국푸드테크협회 홈페이지 제작 후기

기술이 발전하면서 예전에 어려웠던 일들이 쉽게 할 수 있게 된 경우가 많다.


사진의 경우, 
찍기도 어렵고, 결과물로 인화해서 확인하는 건 더 번거로운 과정들이 있었다. 요즘은  스마트폰 터치 몇 번으로 바로 결과물을 확인할 수 있게 되었다. 포토샵을 열어서 보정 해야 헸던 번거로운 작업들도 사진 보정 앱으로 쉽게 할 수 있게 되었다. (보정앱은 이미 오래전에 내 포토샵 능력치를 뛰어 넘었다. ;; )


사진만큼 비약적이진 않지만, 홈페이지를 만드는 것 역시 매우 간단해졌다.
영문도 모른 채 영문과를 입학해서 졸업한 나도 홈페이지를 뚝딱 만들어 내고 있으니 기술의 발전이 놀라울 따름이다.


요즘 인싸들은 코드 한 줄 몰라도 홈페이지를 만들 수 있다고 한다. 그래서 요즘 인싸들이 홈페이지 만드는 방법을 좀 배워보기로 했다. 

Step 0 - 준비물

깨끗한 종이(A4)에 연필로 그려서 작업하는 방식이라 기본적인 필기구가 필요하다. 색연필이 있다면 더욱 화려한 홈페이지를 만들 수 있다.


A4용지

연필 (색연필)

자 / 가위 / 풀

포스트잇 (유사 접착 메모지도 가능)

맥북 (다른 브랜드 노트북 가능 / iPad, iPhone은 불가)

기타 - 디자이너, 홈페이지가 올라갈 서버, WordPres 최신 버전 등



Step 1 - 홈페이지 내용 기획

소설책의 첫 문장을 쓰는 것만큼이나 어려운 작업이다. 홈페이지의 목적을 고려해 어떤 내용을 어떻게 담을지를 고민해야 한다. 대략의 내용이 나오면, 어떤 페이지들을 만들어야 할지 정하고 각 페이지에 맞는 메뉴명을 정하는 것도 필요하다.



Step 2 - 화면 구성 스케치

고민한 내용이 화면에서 어떻게 구현이 되면 좋을지 연필과 포스트잇을 이용해서 그리고 붙여보자. 필요하면 가위로 자르고 풀을 발라 덕지덕지 붙여보자. 너무 지저분해 보이면 복잡한 요소를 빼고, 부족하다 싶으면 내용을 더 채워보자.



Step 3 - 구체적인 내용 채우기


대략적으로 잡은 화면에 구체적인 내용을 채워보자. 카피라이팅이 가능하다면 조금 더 매력적인 내용으로 홈페이지를 채울 수 있을 것이다.



Step 4 - 디자이너에게 밥 사기


내용까지 채워진 화면에 디자이너의 마법의 힘을 빌어보자. 근데 왜 밥을 사느냐고? 디자이너는 마법을 쓸 때 에너지가 많이 필요하기 때문이다.



Step 5 - 맥북으로 홈페이지 업로드


디자이너의 마법의 힘이 더해진 홈페이지에 놀랐는가? 아직은 이르다. 종이 위에 올려진 이 멋진 홈페이지 나 혼자 볼 수는 없지 않은가? 서버에 올리는 일이 남아있다.


가장 중요한 부분이기도 한데 맥북을 열어 홈페이지가 올려진 A4용지를 올려놓고 마법의 주문을 외워보자. 


H.e.l.l.o. W.o.r.l.d. 


맥북이 천천히 홈페이지가 그려진 A4용지를 뱉어내는 걸 볼 수 있다. 다소 시간이 걸릴 수 있으니 재촉하지 말고 커피 믹스를 타서 마시면서 기다리자.



Step 6 - 브라우저에서 홈페이지 확인


자! 이제 홈페이지 제작이 모두 끝났다. 브라우저를 열어서 확인하는 그 페이지를 인터넷에 연결된 모든 사람들이 볼 수 있게 된 거다. 놀랍지 아니한가?

/ 한국푸드테크협회 홈페이지 바로가기

/ 2018 코리아 푸드테크 컨퍼런스 페이지 바로가기




지금까지 인싸들이 코드 한 줄 모르면서 홈페이지 만드는 과정을 알아봤다.


따라 해 봤는데 잘 안된다고? (그럴 수도 있지.)
어떻게 해야 하는지 좀 더 자세히 알려달라고? (맨입으로?)



자세한 설명은 다음 사진으로 대신한다.





Originally published at PAPERon.Net on November 16, 2018.

매거진의 이전글 워드프레스 4.8 ‘Evans’
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari