brunch

You can make anything
by writing

C.S.Lewis

by 한상훈 Feb 18. 2017

웹 사이트 빌드 프로세스

웹 사이트 제작의 3단계 순서

원글링크: https://medium.com/@sanghunhan/website-build-process-4dd0413e17ca




왜 빌드 프로세스를 따라야 하는가?


모든 컴퓨터로 진행되는 프로젝트는 로직을 따른다. 레이아웃이나 폰트 같은 몇몇은 쉽게 바뀔 수 있지만, 구조를 바꾸는 것은 작은 부분이라도 어렵다. 당신은 건축가에게 절대 이렇게 말하지 않을 것이다. "꽤 괜찮은 건물이네요. 그런데 약간만 이동했으면 좋겠어요. 2인치 정도 왼쪽으로 옮겨주실 수 있나요?"


 

1. 컨셉트

컨셉트는 당신의 필요사항, 목적, 도메인을 담는다. 필요사항은 이런 것이다. 댓글 추가하기 기능, 관리자 페이지, 시각화된 데이터 테이블, 소셜 API를 사용. 명확한 요청은 당신과 프로그래머 모두에게 좋다. 왜냐하면 많은 프로그래밍에서 사용되는 함수들은 서로 연결되어있어 사전에 계획하여 만들어가는 것이 추가로 하나씩 더하는 것보다 효율적이기 때문이다. 당신의 요구사항이 하나하나 추가될 수록 선택해야하는 플랫폼, 오픈소스, 서버 성능은 모두 바뀌어야 한다. 시작하기 전에 컨셉트를 명확하게 하라.


2. 설계

웹사이트는 마치 건물과 같다. 장사를 위해서 당신은 건물을 임대할 수도 있지만 서비스 확장을 위해선 임대가 도리어 안 좋은 선택이 될 수 있다. 만약 당신이 만들고자 하는 것이 초고층 빌딩 같은 정교하고 거대한 웹사이트라면 먼저 전문가들을 많이 고용해야 할 것이다. 설계 절차는 다음과 같다.

사이트맵

레이아웃

스토리보드

메인 페이지

페이지들

데이터베이스


이것은 가장 기본적인 절차이다. 복잡한 구조의 사이트일 수록 위의 절차들이 완벽히 수행되어야 한다.


사이트맵은 흐름과 기능을 보여준다. 이것은 방문자의 행동을 이끈다. 이때 기억할 점은 클릭을 최소화 해야한다는 점이다. 사이트를 심플하고, 간결하게 만들라. 당신의 웹사이트가 미로처럼 복잡하길 바라는 사람은 아무도 없다. 당신이 미로 형태의 사이트를 만들면, 사용자들은 2초 안에 당신 사이트를 떠날 것이다.


스토리보드는 근본적인 목적을 담는다. 레이아웃, 컬러, 폰트는 당신의 스토리를 반영할 것이다. 명확한 메세지를 가져라. 이것이 웹사이트 제작을 매우 쉽게 만들어줄 것이다.


메인 페이지는 첫인상이다. 모든 사람에게 중요하지만 웹사이트에게도 동일하다. 잘 분류된 네비게이션에 집중해라. 이해하기 쉽게 웹사이트를 정리하라. 광고를 최소화 하고 끔찍한 팝업은 없에라. 아무도 그걸 보고 싶어하지 않는다.


좋은 레이아웃페이지는 유저가 당신이 원하는 행동을 하도록 만든다. 어떤 사이트는 그리드 스타일을 가지고, 어떤 사이트는 수직이나 수평 형태의 레이아웃을 가진다. 폰트와 컬러는 사이트의 분위기를 변화시킨다. 이러한 모든 요소는 사용자의 편리함을 위해 제작되어야 하지만, 궁극적으론 당신이 원하는 목적을 이루는 가장 좋은 수단이 된다.


마지막으로 데이터베이스 설계가 있다. 이 과정은 데이터베이스를 만드는 절차가 아니라 설계 단계라는걸 명심하라. 먼저 어떤 데이터가 필요한지, 필요없는지 선택한다. 동적 웹사이트는 다양한 타입의 데이터를 전송한다. 만약 당신이 웹사이트를 프로그래밍 하지 않는다면, 당신의 프로그래머에게 예상되는 데이터의 사이즈, 당신이 필요로하는 성능과 비용을 구체적으로 이야기 해야한다.


3. 제작


제작은 최종 최적화를 의미한다. 

프로그래밍

UI/UX(User Interface/User Experience)

테스팅

검색 엔진 최적화(SEO, Search Engine Optimization)

보안

스케일 컨트롤

옵션: 다국어 지원

오프닝


프로그래밍 단계는 언제나 예상보다 긴 시간을 필요로 한다. 만약 당신이 구체적인 설계를 가지고 있다해도 프로젝트는 언제나 계획보다 지체된다. 프로그래밍 단계는 설계 단계에 영향을 줄 것이다. 필요하다고 생각되던 몇몇의 기능들은 삭제되거나 대체될 것이다. 그러나 이것은 자연스러운 일이고, 받아들여야 한다. 가장 중요한 것은 당신의 사이트의 중심 가치이다. 당신은 이것에 집중해야한다.


UI/UX는 사이트의 가치에 집중해야한다. 사용자가 가치를 충분히 알기 위해선 편리해야하고, 오래 머물고 싶어야 한다. 그러니 최대한 쉽게 만들어라.


테스팅 단계는 중요하다. 많은 아웃소싱 프로그래머는 외주 요청자가 관심을 가지지 않으면 테스팅을 실시하지 않는다.   


퍼블리싱 혹은컨텐츠 기반의 웹사이트에게 있어서 검색엔진 최적화는 중요한 의미를 가진다. 이것은 방문자를 증가시키고, 검색 엔진에게 더 매력적으로 보이게 만든다. 검색 엔진 최적화는 간단해보이지만 실제론 방대하고, 많이 공부해야한다. 테스팅 단계 처럼 당신은 더 깊게 이것을 알아야할 필요가 있다.


보안은 일반적인 경우 다루기 힘든 부분이다. 보안을 이루기 위한 유일한 방법은 프로그래머를 괴롭히는 것 뿐이다! 만약 고객 정보나 루트 권한을 잃게 된다면 당신의 웹사이트는 멸망의 날이 온다는 점을 기억하라.


스케일 컨트롤은 스케일업과 스케일 아웃을 준비하는 것을 의미한다. 처음 시작할 때 모두들 작게 시작한다. 그러나 방문자가 늘어나고 트레픽이 커지면 당신의 웹사이트에 부하가 걸린다. 이것은 퍼포먼스를 감소시키고 심해지면 아예 방문자들을 막아버린다. 스케일 컨트롤은 이제 자동으로 처리하는 서비스가 많이 있으니 프로그래머에게 이 점을 꼭 요구해야한다.


마지막으로 오프닝이다. 그렇다. 당신은 해냈다. 그러나 오프닝의 목적은 오프닝 자체가 아니다. 당신의 웹사이트는 오프닝 이후에도 많은 테스트를 거쳐가야하고, 조정을 할 것이다. 그러나 오프닝 이후엔 준비 단계보다 수정하는데 어려울 수 있다. 오프닝 단계는 다양한 위험요소들로부터 준비하는 단계라 할 수 있다. 그리고 많은 웹사이트 모델은 '네트워크 효과' 에 영향을 받는다. 네트워크 효과란 사용자가 많아질 수록 가치가 높아진다는 걸 뜻한다. 이것은 전염성을 가지는데 아쉽게도 오프닝 당시엔 한명의 사용자도 없는 상황이다. 만약 당신이 페이스북을 만들었다고 해도 사용자 0명으론 작동하지 않는다. 최소한의 시작 인원이 필요하다. 어떻게 당신은 런칭 전에 사람을 모을 수 있을까? 몇가지 방법이 있다. 테스터를 모집해라. 광고 혹은 요청으로 당신의 친척들, 친구들을 부르라. 당신이 웹사이트를 홍보할 때 타겟을 지혜롭게 선택하라. 페이팔의 초기 모습을 기억하라. 그들의 홍보와 서비스는 이베이의 메가 딜러라는 한 그룹에 촛점을 맞췄다.





프로세스는 이제 끝났다. 그러나 비즈니스는 이제 시작이다. 이것은 웹사이트 제작자들에게 있어서 반복적인 활동이다. 이제 당신도 그 안에 들어왔다. 당신이 웹사이트를 열 때 나에게도 알려달라.

매거진의 이전글 비즈니스를 위한 웹사이트 제작

작품 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari