여러분은 재능의 한계를 느껴본 적이 있으신가요? 성실하게 학습에 임했던 학창 시절, 유일하게 하위 등급인 미술 성적을 보고는 어찌할 수 없는 재능의 벽 같은 것을 느꼈던 순간이 있습니다. 어느 순간부터 사생대회는 김밥 먹고 놀다가 벼락치기로 그려서 내는 행사였던 걸 생각하면 당연한 일일지도 모릅니다.

그런 제가 아름다운재단의 공익마케팅팀에서 웹페이지를 제작하게 된 것은 스스로 어쩌다가..싶은 마음이 들기도 해요. 뭐든 보기 좋으면 됐지(왜 좋은지도 모르면서) 싶은 저에게 웹페이지는 나와는 거리가 먼 미지의 영역이었거든요.

재능의 벽을 넘어 웹페이지 제작으로 향하는 길은 이게 맞아?의 연속이었습니다. 답이 없는 질문, 이 색이 맞아? 이 폰트가 맞아? 이 배열이 맞아?는 제게 고통을 주기도 했어요. 사무실에서 웹페이지 가내수공업을 돌린 지 어언 상반기를 넘은 지금, 코딩과 디자인 비전공자의 때려 맞추기식 웹페이지 제작 도전기를 여러분에게 공개합니다.

 

무엇이든 시작은 장비 마련부터

맨 처음에 제작한 ‘그래도 집이 최고지’는 외부 업체와 제작을 진행했습니다. 전문가의 도움을 받아 잘 정리된 페이지를 제작할 수 있었지만, 기획과 제작에 최소 두 달은 필요해서 하고 싶은 말을 담을 수 있는 빈도는 얼마 안 된다는 것이 아쉬웠어요. 한정된 시간 동안 하고 싶은 많은 말을 효과적으로 담으려면 제작 과정의 효율성을 개선하는 일이 필요했습니다.

그래서 선택한 장비는 누구나데이터에서 제공하는 웹페이지 제작 플랫폼 캠페이너스였습니다. ‘캠페이너스’는 손쉬운 인터페이스로 웹페이지를 제작할 수 있는데요. 자체 제작으로 기간을 단축하며 수시로 수정이 가능하다는 점과 무제한으로 웹페이지를 생성할 수 있다는 점이 가장 매력적이었습니다. 덧붙여 가격이 저렴한 편이라 팀장님께 ‘한번 해보겠습니다!’라고 말씀 드려 보는 것도 어렵지 않았고요.

웹페이지 제작의 과정은 가장 크게 기획부터 제작, 오픈으로 나눌 수 있습니다. 과정별로 한번 소개해 드려 보겠습니다.

 

 

첫 번째, 기획

자료와 레퍼런스 서치, 웹페이지 컨셉 정하기, 원고 작성

웹페이지를 제작하기 위한 시작 단계입니다. 정해진 주제에 대한 아름다운재단 자료만이 아니라, 인사이트를 얻을 수 있는 다양한 자료를 찾습니다. ‘무장애 놀이터’가 주제라면 어린이들에게 놀이의 의미, 유니버셜 디자인이 적용된 놀이터, 최근의 기사 등 폭넓게 보는 과정입니다. 과정을 통해 사회의 필요와 재단의 문제해결 방식 간의 교차점을 찾아내면 이를 키워드와 메시지로 정리합니다.

 

<그동안 본 자료 중 추천>

1. 가난한 도시생활자의 서울 산책
   – 평생 살아온 서울이 갑자기 낯설게 느껴지는 경험을 주는 책입니다. 책을 읽은 지 오래 지나도 문장과 장면이 기억에 오래 남습니다.
   
   
2.  매일 김용균이 있었다…1748번의 죽음의 기록
   – 경향신문에서 제작한 산재 사망사고 아카이브 인터랙티브 페이지입니다. 수도 없이 여러 번 본 페이지인데도, 볼 때마다 심장이 쿵 하고 내려앉는 느낌이 듭니다.
   
   
3. [제6회 노회찬상] 수상자 특별강연 – 고 강태완ㅣ김사강 이주와인권연구소 연구위원
   – 이주 배경 아동이 한국 사회에서 어떻게 어른이 되어가는지, 사회가 이주 배경 아동을 어떻게 대하고 있는지 선명하게 알 수 있는 자료라고 생각합니다. 故 강태완 님의 명복을 빕니다.
   
   
4. MSV 소셜임팩트 시리즈 03 놀이
   – ‘아이는 놀이를 통해 타인을 이해하고 세상과 관계를 맺는 존재로 성장한다’라고 합니다. 아이들에게 놀이의 중요성, 장애 아동의 놀이터 이용 현황, 국내외 통합 놀이터의 사례, 놀이터의 역사 등 놀이에 대해 전반적으로 알 수 있어요.

 

정리된 메시지를 가장 잘 전달하기 위한 웹페이지의 컨셉을 잡습니다. 이 과정에는 생각지도 못한 많은 것에서 아이디어를 얻어요. 제작 시기의 계절감, 우연히 본 인스타그램 포스팅, 평소에 좋아하는 취미까지 다양합니다. 아이디어를 컨셉으로 구체화하는 과정에서 유용하게 사용하는 도구는 ‘핀터레스트’입니다. 원하는 느낌의 이미지를 타고 들어가다 보면 다양한 이미지를 참고해 컨셉을 구체화할 수 있는 것이 장점이에요.

 

 

두 번째, 제작

텍스트와 이미지 배치, 페이지 효과, 피드백 후 수정

가장 본격적인 단계입니다. 기획 단계에서 작성한 원고의 텍스트와 이미지들이 효과적으로 전달될 수 있도록 구성을 만들어 배치해 봅니다. 기획 단계에서 정한 컨셉의 추구미와 제작 단계의 도달가능미 사이에서 가장 고통 받게 되는 단계이기도 합니다.

이 과정에는 이미지가 중요하기에 관련 플랫폼의 도움을 많이 받습니다. 유료 이미지 사이트를 이용하거나, 별다른 디자인이 필요 없는 간단한 이미지는 망고보드로 제작하고요. 간단한 일러스트를 그리거나 기존 사진을 참고하여 이미지를 만들어낼 때는 ChatGPT의 도움도 받습니다. 

 

<사용한 도구 소개>

1. 망고보드(링크)
   
   

   망고보드로는 타이틀 이미지, 플로팅 배너, 그래프 등을 제작합니다.

   – 기본적으로 제공되는 템플릿이나 그래픽, 폰트 등이 다양하여 간단한 이미지를 제작하는데 유용합니다. 컨셉에 맞게 그래픽 요소들을 조합하여 타이틀 이미지를 만들거나, 웹페이지 오른쪽 위에 띄우는 플로팅 배너 등을 만들고 있습니다.
   
   
   
2. ChatGPT
   
   

   ChatGPT를 향한 의심과 원망의 눈초리

   – 이미지 생성에 최적화된 AI들도 많지만, 관련 사용경험이 적어 가장 친숙한 AI를 사용했습니다. 원하는 결과를 내도록 정확한 명령을 입력하는 것이 중요한데요. 저는 그냥 원하는 결과가 나올 때까지 차분히 설명해 보거나 윽박질러 보는 것이 최선이었습니다.

 

그 외에 간단하게는 이미지 용량 최적화나 크기 조절, 배경 제거 등의 사이트를 이용합니다. 색상 관련해서는 컬러 코드를 변환하는 사이트나 스포이드로 화면에 표시된 색상의 코드를 알려주는 사이트, 두 가지 이상의 색 조합을 알려주는 사이트 등도 있어 여러 도움을 받을 수 있어요.

 

 

세번째, 오픈

최종 검수, 홈페이지 오픈

가장 중요한 것은 텍스트에 오탈자가 없는지 맞춤법 검사기를 이용하는 것입니다. 띄어쓰기는 여러모로 헷갈리는 경우가 많은데요. 오탈자가 있거나, 띄어쓰기가 틀리면 웹사이트에 대한 신뢰도가 낮아질 수 있다는 생각으로 꼼꼼히 확인해보고 있습니다.

텍스트나 이미지가 어색하게 보이는 부분은 없는지 PC와 모바일의 다양한 화면에서 확인해보는 과정도 거칩니다. 그 외에 URL 설정, 미리보기 이미지 설정 등 세세한 과정을 거치면 웹페이지가 최종 완성됩니다.

마지막으로 재단의 홈페이지를 관리하는 부서인 브랜드커뮤니케이션팀에 제작한 웹페이지의 홈페이지 게시를 요청드립니다. 이렇게 모든 과정을 거치면 여러분이 보시는 아름다운재단의 메인 화면에 배너로 공개가 된답니다.

 

 

가내수공업 웹페이지의 최종 목표는?

모든 것에는 다 이유가 있듯이 제가 굳이? 싶어 보이는 도전을 하게 된 것도 다 이유가 있습니다. 

아름다운재단은 창립 이래 수많은 사업과 캠페인으로 사회문제에 대한 새로운 인식과 변화를 만들어 냈는데요. 그 과정에서 이래야 한다는 당위성의 수준을 넘어, 사회에 방향을 제시하는 아름다운재단의 더 크고 또렷한 대답을 하고 싶다는 생각이 들었기 때문이죠.
사회문제를 어떻게 바라보는지, 문제를 어떻게 근본적으로 해결하고자 하는지. 아름다운재단의 사회문제에 대한 관점과 방법을 담은 ‘아름다운재단다운 사회문제해결’ 페이지는 이렇게 시작되었습니다.

사회문제해결이라는 이름 아래 제작한 페이지가 어느새 5개가 되었습니다. 이 페이지의 끝은 어디일까요? 그건 제작하고 있는 저도 모르고, 누구도 모르는 일 같습니다.

그동안 제작한 페이지들을 한 번에 볼 수 있는 메인페이지를 오픈했어요. ‘아 여차저차했지만 여기까지 왔군’하는 느낌의 중간지점이랄까요? 이 길이 어디로 향할지는 아무도 모르지만 그래도 열심히 해보는 중입니다. 그건 당장의 변화를 만들어내지 못하는 것 같더라도, 시선을 놓지 않고 묵묵히 방법을 만들어내는 아름다운재단의 방식이기도 하니까요.