by
Sep 08. 2019
도화지에 그리듯 웹사이트 만들기 (기획)
Archive me
내 생각엔, 웹사이트는 더 자유로워야 한다.
마음대로 그림 그리는 도화지처럼
인터넷이 대중들에게 보급된 후, 아직 웹표준이라는 것이 정립되기 이전에 온국민이 개인 홈페이지를 만들던 시대가 있었다. 초등학생들도 숙제로 홈페이지를 만들었고, 누구나 온라인에 자기 공간 하나쯤 갖는 게 멋이었던 시절이다. 하지만 개인이 혼자 만든 웹사이트는 기능이 다양하지도 않았고, 지속적으로 관리하고 업데이트하기는 건 귀찮은 일이었다. 또 사이트를 제대로 유지한다는 것은 보다 정교한 기술이 필요한 일이었다. 무엇보다 사람들이 자신의 홈페이지로 할 수 있는 일이 마땅히 없었다. 이런 니즈를 파악하고 무료홈페이지 서비스가 유행했고, 싸이월드 미니홈피가 탄생했으며 이 개인공간 기반의 커뮤니티 개념은 오늘날의 SNS 로 이어졌다. 발전을 거듭할수록 사이트 운영을 위해 개인이 할 일은 줄어들고, 쉽고 빠른 네트워킹 기능이 강화되었다.
나는 다음과 싸이월드로 웹사이트를 접하고 개인홈페이지를 만들었다. 다음 카페와 싸이월드, 네이트온 채팅에 전력으로 몰두했었다. 온라인 상에 나의 공간이 있다는 것, 그 안에는 나의 모든 것이 담겨있고, 친구들과 주거니 받거니 방문하며 주고받는 메시지들이 그 어떤 놀이보다도 즐거워 시간가는 줄 몰랐다. 그리고 나는 더 ‘힙한’ SNS로 옮겨가고 더 이상 싸이월드를 찾지 않았다. 친구들과는 더 긴밀한 소통이 이루어졌지만, 그럴수록 점점 더 서로를 찾지 않게 되었다. 나이가 들고 시대가 변해서일 수 있다. 하지만 나는 그 원인을 조금 다른 데서 찾는다. 페이스북이나 인스타그램에서는 자신을 드러낼 방법이 많지 않기 때문에 서로에 대해 흥미와 호기심이 줄어들기 때문이라는 생각이 든다. 셀카 중에 잘 나온 것 몇 장을 올리고, 내 기분에 대해 한두줄 끄적이고 나면 더 이상 할 수 있는 게 없다. 또 한꺼번에 너무 많이 올리면 남의 타임라인을 가득 채워 본의 아니게 민폐를 끼치는 기분이 든다. 예전에는 내 공간에 내 사진을 잔뜩 올리고, 백문백답이며 온갖 좋아하는 것들을 카테고리화 해서 올려두면 사람들이 알아서 찾아와 말을 걸었는데, 이젠 오히려 내가 나를 너무 많이 드러내지 않으려 애를 쓰면서도 눈치가 보인다. 그러다보니 친구의 타임라인에 들어가봐도 수천장의 사진을 통해 알 수 있는 것은 별로 없다. 그것들은 그냥 좋았던 순간들을 짧게 잘라서 보여줄 뿐이니까.
나를 아카이빙 하고싶은 욕구가 다시 피어올라 웹을 공부했다
싸이월드 시절이 그립다는 것까지는 아니다. 친구들의 모든 것을 알고 싶은 것도 아니다. (놀러가서 예쁘게 찍은 사진 몇장 보다는 정말로 뭘하고 지내는지 좀더 알고싶긴 하지만) 내가 정말로 원하는 것은 나에 대해 자유롭게 아카이빙할 수 있는 온라인 공간이다. 내가 브런치를 하는 이유도 나라는 사람에 대해 정리하는 것이 즐겁고 유익하기 때문이다. 나는 글을 쓰거나 읽고 싶으면 브런치를 켠다. 이 공간에 오면 ‘글’과 관련된 나의 뇌가 활성화되는 느낌이다.
최근 나는 웹프로그래밍을 공부하고 있다. 개인 웹사이트를 만들고 싶기 때문이다. 여러가지 난관들이 벌써 많이 보이지만 그럼에도 꼭 하고 싶은 이유는 온라인 상의 나의 방에 들어가는 순간 나의 모든 것들을 한눈에 보며 능률적으로 일하고, 놀고, 살고 싶기 때문이다. (어쩌면, 정말 어쩌면 나중에 VR기술을 활용해 실제공간으로 재탄생시킬 수도 있지 않을까?)
여기, 온라인 작업공간에는 나의 모든 것이 있다. 글, 영화, 음악, 집(지역), 가치관, 이력서, 공부할 것, 스케줄, 채팅목록, 건강, 자산, 사진. 세부 카테고리에 따라서는 공개범위를 조정해야겠지만 가능하면 모든 것을 이곳에서 볼 수 있으면 좋겠다. 자산현황이나 사진의 경우 굳이 새로 뭔갈 만들고싶다기 보다는 내가 잘 쓰고 있는 뱅크샐러드나 은행어플, 구글포토 어플을 연동해두고 싶은 것이다. 혹은 링크라도. 한눈에 보고 필요할 때 바로 살펴볼 수 있다는 점이 가장 중요하다.
1. BOOKLIST & REPORT LIST
BOOKLIST를 클릭하면 재밌게 읽은 책목록이 나열되고, 각각 클릭하면 독후감으로 연결된다. REPORT LIST를 클릭하면 지금까지 써온 소설, 칼럼이 나열된다. 최근 봤던 데이터 목록이나 찾아둔 글감이 옆에 떠있어서 글을 쓸 때 바로바로 볼 수 있다.
2. My THOUGHTS
My Thoughts를 클릭하면 나의 가치관이 소개된다.
3.CHATS
CHATS를 클릭하면 카카오톡, 메일, 문자메시지로 연결된다. 비공개이다.
4.WINDOWS
현재 내가 있는 곳의 풍경과 계절이 보이면 좋을 것 같다. 사진을 첨부할 수도 있지만 실시간으로 바뀌어도 재미있을 것 같다.
5. BOARD
BOARD에는 수시로 확인해야 하는 것들이 있다. 이력서, 공부중인 것들, 스케줄 등이다.
6. PLAYLIST
내가 좋아하는 영화와 음악 플레이리스트가 펼쳐지고, 바로 재생할 수 있다. 마음 같아서는 DB에 MP3, MP4 파일을 넣어두고 싶지만(스트리밍서비스가 일반화되기 전까지 영화와 음악파일을 외장하드에 수집하는 것이 취미였다) 저작권은 소중하므로 유튜브 링크로 연결시키는 편이 나을 것이다.
7. HEALTH CHECK
비공개 건강진단 항목이다. 대단한 건 아니고, 현재 체중과 키, 운동일정, 비타민과 약을 체크하기 위한 항목이다.
8. MONEY
자산현황이다. 이걸 엑셀로 일일이 정리하는 건 말도 안된다고 생각한다. 뱅크샐러드 어플을 잘 쓰고 있는데 어떻게 활용하면 좋으려나?
9. GOOGLE PHOTO
구글포토가 내 사진을 아주 잘 저장해주고 있다. 링크를 걸어두면 좋을 것 같다.
10.
화면 정가운데에는 좌우명 혹은 스스로를 다독이는 글귀를 적어둔다.
나의 공간, 나, 나, 나! 그리고 자존감
점점 더 자존감이 중요해지는 시대이다. 말로만 ‘나’를 말하는 시기를 넘어서 이제는 자존감이 경쟁력이고, 없으면 크게 다치는 보호막 같은 것이 되었다. 스스로를 가장 소중히 여기는 사람들 속에서 혼자만 자존감 없이 살아남는다는 건 너무 힘들고 아픈 일이다. 나를 가장 잘 알기 위해서는 내가 뭘 좋아하는지, 어떤 생각을 하는지 정리해두는 것이 아주 많이 도움이 된다. 경험에서 우러나온 생각이다.
그런데 나에 대해 알아보기 위해 뭔가 적어내려가고 정리하는 것은 생각보다 정말 쉽지 않다. 특히 처음 시도하는 입장에서는. 그런데 그림을 그리는 것은 좀더 자유롭고 편하다. 이 웹사이트를 기획하기 전에 나는 시중의 홈페이지 서비스를 이용하려고 했는데, 이미 틀이 고급스럽게 잡혀있어서 나의 낙서 같은 생각들을 적기가 조심스러웠다. 브런치에 글을 쓸 때에도 퇴고를 여러 번 한다. 나의 만족을 위한 목적과 남에게 보여주기 위한 목적 그 사이 어딘가에 있기 때문이다. 하지만 레이아웃부터 자유롭다면, 그리고 특정 사이트에 의존하지 않는 나만의 도메인이라면, 좀더 내 취향만을 고려해서 마음대로 꾸밀 수 있을 것이다.
그럼 이것은 인터넷이 처음 나왔을 때 사람들이 만들던 웹사이트와 무엇이 다른가? 타인과 교류하지 못하는 온라인 공간은 결국 고립되어 사라지는 것이 아닐까?
나는 SNS 의 피상적인 정보들이 아쉬워 이 깊고 넓은 웹사이트를 구상했다. 다른 사람들도 과연 나만큼 나 자신과 주변사람들을 자세히 알고 싶은 욕구가 큰지는 잘 모르겠다. 내가 유명한 인플루언서나 스트리머도 아닌데 과연 나에 대해 깊숙이 알고 싶어 찾아오는 방문자들이 있을까? 싸이월드를 하던 시절보다 연락하는 사람의 수도 현저히 줄었는데? 글쎄, 한명도 없어도 상관이 없다. 운영목적이 전적으로 ‘나’에게 있다는 표현이 맞을 것 같다. 이 공간은 나에 대해 소개하는 공간이면서, 나의 작업공간이기도 하다. 쓰고싶은 글, 읽고싶은 책, 보고싶은 영화, 공부하고 싶은 것들이 있는 한 이 공간의 의미는 사라지지 않을 것이다.
기술적인 한계를 극복하고 혹시 이 웹사이트를 템플릿화할 수 있으면, 친한 친구들에게도 권하고 싶다. 그러면벚꽃 아래에서 찍은 사진이나 맛있는 카페 디저트 말고도 서로에 대해 더 많은 것을 공유할 수 있을 테니까.
도움받은, 혹은 도움 받고있는 수업
1. 생활코딩 WEB 수업 / AWS 수업
생활코딩 WEB- html&internet(https://opentutorials.org/course/3084)은 내 삶에서 처음으로 들은 컴퓨터언어 강의이다. 유명하고, 또 이전 포스팅에서 자세히 설명한 만큼 언급만 하고 넘어가고자 한다. 한편, 서버 - AWS 강의는 이제 들어보려고 한다. 아마존 웹서비스를 활용해서 서버를 자유자재로 운영하게 되면, 그리고 과금방식에 납득하게 되면 이를 활용한 글을 작성해보려고 한다.
2. 기발자 님의 웹 프로그래밍 강의
기발자 김인권(https://brunch.co.kr/@brunch92ny)님의 html, css, javascript 강의는 예제가 정말 다양하고 친절한 수업이다. 웹을 만드는 데에 필요한 필수지식은 강의안으로 정리해주셨고, 도움이 될만한 사이트는 링크로 공유해주셨다.
자바스크립트 강의가 특히 인상적이었는데, 웹은 목적에 따라 수많은 기능들이 들어갈 수 있는데, 그중 많이 쓰이는 것들을 단독 기능 버전, 두 세가지 기능 혼합 버전으로 나누어 직접 제작해오신 샘플과 코드를 공유해주시면서 실습기회를 주셨다. 실제로 만들어보는 경험이 있었기 때문에 더욱 손에 잡히는 강의였다. 예시를
몇가지 소개한다.
HTML과 CSS 애니메이션을 활용한 웹사이트 데모 따라 만들기 소스코드를 그대로 쓸 수 있어서 어려운 점은 없었다. 태그와 요소들의 위치를 익히는 데 집중했다.
배경색 변경기능 실습
배경색 변경기능 실습 CSS 를 처음 배울 때에 애를 먹었던 색상 바꾸기 기능이다. 색상번호를 할당하고 랜덤하게 순번만 바뀌면 되는데 왜인지 나는 아직도 헷갈린다.
To Do List 기능 구현 실습