코드 없이 개인 웹사이트 만드는 법 (단계별 가이드)

개인 웹사이트는 사실 누구에게나 쓸모가 있습니다. 나를 소개하고, 작업을 보여주고, 사람들이 나를 찾을 수 있는 한 자리. 그런데 정작 가진 사람은 드뭅니다. 왜냐하면 지금까지는 HTML을 배우거나, 답답한 템플릿과 씨름하거나, 누군가에게 돈을 주고 맡겨야 했으니까요.

이제는 그럴 필요가 없습니다. 원하는 걸 평범한 말로 설명하면 됩니다. 친구에게 "이런 페이지 하나 있으면 좋겠어"라고 말하듯이요. 나머지는 알아서 만들어집니다.

사이트의 목적부터 정하기

가장 먼저 할 일은 "이 사이트가 무엇을 위한 것인가"를 한 줄로 정하는 겁니다.

• 자기소개 — 나는 누구이고 무엇을 하는 사람인지 보여주는 명함 같은 페이지
• 포트폴리오 — 작업물이나 프로젝트를 보여주는 게 핵심
• 랜딩 페이지 — 하나의 목적(연락, 신청, 구매)으로 사람들을 모으는 페이지

세 가지를 다 욕심내지 마세요. 하나만 고르면 사이트가 훨씬 깔끔하고 분명해집니다. 목적이 정해지면 나머지 결정이 저절로 따라옵니다.

재료부터 모으기

집을 짓기 전에 자재를 모으듯, 사이트를 만들기 전에 들어갈 내용을 먼저 챙겨두면 일이 빨라집니다. 거창할 필요는 없습니다.

• 이름과 한 줄 소개 — "프리랜서 디자이너 김지원" 같은
• 짧은 자기소개 — 두세 문장이면 충분합니다
• 프로젝트나 링크 — 보여주고 싶은 작업물, SNS, 블로그 주소
• 연락처 — 이메일이나 연락 가능한 방법

이 네 가지만 손에 쥐고 있으면 설명할 때 막힘이 없습니다.

원하는 걸 평범한 말로 설명하기

이제 핵심입니다. 디자인 용어도, 코딩 지식도 필요 없습니다. 머릿속 그림을 그대로 말로 풀어내면 됩니다.

"맨 위에 내 이름이 나오고, 짧은 자기소개와 프로젝트 세 개가 카드 형태로 보이는 한 페이지짜리 사이트. 깔끔하고 차분한 느낌으로, 여백을 넉넉하게 줘. 누르면 내 이메일로 연결되는 연락 버튼도 하나 넣어줘."

이 정도면 충분합니다. "여백을 넉넉하게", "차분한 느낌으로" 같은 평범한 표현이 오히려 더 잘 통합니다. 전문 용어를 쥐어짤 필요가 없어요.

만들어지는 걸 보고 다듬기

설명을 입력하면 사이트가 눈앞에서 실제로 만들어집니다. 마음에 안 드는 부분이 보이면, 그것도 그냥 말로 바꾸면 됩니다.

"자기소개를 더 짧게 줄이고, 연락 버튼을 맨 위로 올려줘. 파란색은 좀 더 부드러운 톤으로 바꾸고, 프로젝트 제목은 조금만 더 키워줘."

다시 처음부터 만들 필요도, 어디를 어떻게 고쳐야 하는지 찾아 헤맬 필요도 없습니다. 본 것을 말하고, 바꾸고 싶은 것을 말하면 그대로 반영됩니다. 마음에 들 때까지 이 과정을 몇 번이고 반복하면 됩니다.

휴대폰에서 확인하기

대부분의 방문자는 PC가 아니라 휴대폰으로 들어옵니다. 그래서 모바일에서 어떻게 보이는지 꼭 확인해야 합니다.

작은 화면에서 보면 PC에서는 멀쩡하던 게 답답해 보일 때가 있습니다. 그럴 땐 이렇게 말하면 됩니다.

"휴대폰으로 보니까 프로젝트들이 너무 빽빽해 보여. 사이를 좀 더 띄워줘."

휴대폰에서도 편안하게 읽히는지, 이 한 가지만 챙겨도 사이트의 완성도가 확 올라갑니다.

게시하고 공유하기

마음에 들었다면 이제 세상에 내놓을 차례입니다. 사이트를 게시하면 누구나 접속할 수 있는 웹 주소가 생깁니다.

여기에 yourname.com 같은 나만의 도메인을 연결하면 한층 더 깔끔하고 프로페셔널해 보입니다. 게시하기 전에 모든 링크가 제대로 동작하는지 한 번씩 눌러보는 것도 잊지 마세요.

이제 주소를 알릴 차례입니다.

• 이메일 서명에 넣기
• SNS 프로필에 링크 걸기
• 명함에 적기

살아있는 사이트로 유지하기

개인 웹사이트는 한 번 만들고 끝내는 게 아닙니다. 상황이 바뀌면 그때그때 업데이트하면 됩니다 — 역시 평범한 말로, 단 몇 분이면 됩니다.

새 프로젝트가 생겼나요? "맨 위에 새 프로젝트 하나 추가해줘"라고 말하면 끝입니다. 화려하지만 1년 전에 멈춰버린 사이트보다, 조금 투박해도 지금의 나를 보여주는 사이트가 훨씬 낫습니다.

정리하면

코드 없이 개인 웹사이트를 만드는 일은 결국 세 가지로 요약됩니다. 무엇을 원하는지 알고, 그것을 평범한 말로 설명하고, 눈에 보이는 결과를 다듬는 것. 그게 전부입니다.

meshcode는 바로 이 흐름을 중심으로 만든 Mac·Windows·Linux 데스크톱 앱입니다. 원하는 걸 평범한 말로 설명하면 동작하는 소프트웨어를 만들어 실행해줍니다. 현재 얼리 액세스 중입니다 — 얼리 액세스 대기자 명단에 등록하고 오늘 나만의 페이지를 시작해 보세요.