웹사이트는 새로운 비즈니스 기회를 위한 중요한 관문 역할을 합니다. 새로운 웹사이트를 구축하거나 재설계하는 것은 어려운 여정이 될 수 있습니다. 저는 회사 웹사이트의 재설계를 주도한 후 우리의 여정을 일부 공유하기로 결정했습니다. 새로운 웹사이트를 구축하거나 현재 웹사이트를 재설계하는 것을 고려하고 계신다면, 이 내용이 귀하의 여행을 더욱 순조롭게 만드는 데 도움이 되기를 바랍니다.  평가  저희 웹사이트는 저희에게 새로운 사업을 시작하는 중요한 관문입니다. 웹 개발 부티크로서 우리가 온라인에 자신을 소개하는 방법은 우리의 업무와 고객이 우리와 함께 일할 때 무엇을 기대할 수 있는지에 대해 많은 것을 알려줍니다.  새로운 브랜드에 어울리는 새로운 웹사이트를 만들기로 결정한 후에는 고객과 청중에게 좋은 품질의 웹사이트를 보여줘야 한다는 것이 분명해졌습니다. 우리 팀은 작업을 시작하기 전 준비 단계에 많은 고민과 노력을 기울였습니다.  우리는 웹사이트나 재설계가 왜 필요한가?라는 간단한 질문으로 시작했습니다. 이는 목표에 계속 집중하고 곁길로 빠지는 것을 방지할 수 있는 훌륭한 방법입니다.  이유를 이해한 후 타겟 고객을 식별하는 과정을 거쳤습니다. 우리가 이 웹사이트를 구축한 대상은 누구입니까? 누구에게 다가가려는지, 그들이 브랜드와 작업에 대해 무엇을 알기를 원하는지 명확하게 이해하는 것이 중요합니다.  그런 다음 우리는 청중에게 전달하고 싶은 메시지, 우리가 어떻게 보여지기를 원하는지, 그리고 가장 중요한 것은 우리가 하는 일에 능숙하다는 것을 어떻게 증명할 수 있는지에 대해 생각하기 시작했습니다. 이 메시지의 상당 부분은 브랜드 생성 과정에서 고려되었으며(   확인하세요) 이를 새 웹사이트에 전송해야 했습니다. 새 브랜드를 어떻게 생성했는지  우리는 이미 온라인 활동을 하고 있었기 때문에 시간을 내어 기존 웹사이트를 평가하고 잘 작동한다고 생각하는 기능과 측면, 그리고 부족하다고 생각하는 부분을 나열했습니다.  이 전체 과정에서 우리 업계의 회사들이 무엇을 하고 있는지 이해하기 위해 경쟁사 벤치마크를 추적하는 것도 매우 중요했습니다. 우리는 또한 참고 자료와 영감을 얻기 위해 다른 유형의 웹사이트도 둘러봅니다. 이는 우리에게 몇 가지 귀중한 통찰력을 제공하고 실수를 반복하거나 필수 기능을 놓치는 것을 방지하는 데 도움이 되었습니다.  이 준비 단계의 마지막 단계는 우리 웹사이트에 포함시키고 싶은 특징 및 기능 목록이었습니다. 이것은 우리가 원하는 모든 것을 할 수 있다는 희망 목록을 만드는 것과 같았습니다. 목록은 나중에 우선순위가 지정되었으며, 우리는 필수 기능과 나중에 구현할 수 있는 있으면 좋은 기능을 선택했습니다. 가장 중요한 요소에 먼저 집중하는 것이 중요합니다.  이러한 단계 중 일부는 전체 팀과 함께 수행되었습니다. 소규모 팀이기 때문에 우리는 모든 사람이 이 프로세스에 어느 정도 참여하기를 원했습니다. 이 첫 번째 평가 이후, 우리는 분열과 정복을 시작했고 새로운 웹사이트를 현실로 바꾸는 일을 담당하는 전담 팀원을 두었습니다.  설계  우리는 웹 프로젝트의 디자인 프로세스에 뛰어들게 되어 기뻤습니다. UI/UX 디자인은 모든 웹 프로젝트의 중요한 측면입니다. 우리는 여러 분야의 팀이 참여했지만 디자이너는 우리가 청중에게 전달하고 싶은 메시지를 시각적으로 표현하는 책임을 맡은 쇼의 스타였습니다.  디자이너가 프로젝트의 요구 사항과 기대치를 명확하게 이해하여 메시지를 시각적으로 전달하고 이에 따라 콘텐츠를 구성하는 것이 중요했습니다. 우리는 올바른 톤으로 간결하고 매력적인 디자인을 목표로 했습니다.  프로젝트의 이 단계에서 우리는 다음 단계를 따랐습니다.  우리는 처음부터 사용자 중심 접근 방식을 채택했습니다. 우리는 타겟 고객이 우리를 어떻게 인식하고 상호 작용하는지에 중점을 두었습니다. 이것이 우리가 정보 아키텍처 작업을 시작하고 필요한 페이지, 섹션 및 구성 요소를 결정하고 사본의 첫 번째 초안을 작성하는 것으로 시작한 이유입니다.  다음으로 우리는 레이아웃과 기능을 대략적이고 충실도가 낮은 표현을 제공하기 위해 low-fi 와이어프레임을 만들었습니다. 이를 통해 우리는 디자인에 너무 많은 시간과 노력을 투자하기 전에 아이디어를 테스트하고 실험할 수 있었습니다. 우리는 이 단계에서 일반적인 사용자 흐름도 고려했습니다.  이 단계는 사용할 구성 요소의 전체 환경, 즉 디자인 시스템 생성의 기반을 마련했기 때문에 매우 중요했습니다. 우리는 디자인 패턴, 지침 및 예제가 포함된   사용하여 라이브러리를 구축했습니다. 이 라이브러리는 모든 UI 요소 간의 일관성을 보장하고 새로운 구성 요소를 도입할 때 확장성을 위한 기반을 설정하는 단일 정보 소스였습니다. Figma를  디자인 시스템이 정의되면 우리는 High Fidelity로 레이아웃을 구축했습니다. 그때까지 제작한 lo-fi 와이어프레임에 UI를 적용했습니다. 이 단계에서는 접근성 요구 사항을 준수하는지에 대해 디자인을 완전히 테스트했으며 콘텐츠 표시와 관련하여 보다 세련된 결론을 도출했습니다.  우리는 프로세스 전반에 걸쳐   사용하여 팀과 더 쉽게 협업하고 반복할 수 있었습니다. 몇 번의 반복 끝에 우리는 개발자가 작업할 수 있는 최적의 버전을 얻었습니다. Figma를  개발  우리는 기술 스택을 선택하고 프로젝트 개발 단계에서 디자인을 구현하는 데 중점을 두었습니다. 우리는 프로젝트 관리자가 작성한 사용자 스토리가 포함된 제품 백로그를 기반으로 스프린트 방식으로 작업했습니다.  기술 스택 선택  디자인 단계가 진행됨에 따라 우리가 구축하려는 웹 사이트에 가장 적합한 기술이 무엇인지 조사했습니다. 우리 개발자들은 이전 단계의 결과를 바탕으로 이를 결정할 수 있었습니다.  다양한 옵션을 사용할 수 있기 때문에 오늘날 세계에서는 올바른 기술 스택을 선택하는 것이 그 어느 때보다 중요해졌습니다. 우리는 프로젝트 요구 사항, 팀의 전문성, 리소스 가용성, 비용, 성능, 보안, 확장성 등 다양한 기준을 고려했습니다.  우리는 이 프로젝트를 위해 간단하고 빠르며 아름다운 웹사이트를 원했습니다.  우리는 웹 사이트의 구성 요소, 기능을 더 작고 재사용 가능한 구성 요소로 나누는 모듈식 접근 방식을 채택했습니다. 이 접근 방식을 통해 웹 사이트의 여러 부분에서 구성 요소를 재사용할 수 있었고 개발자와 디자이너 간의 협업이 촉진되었으며 개발된 내용을 더 쉽게 테스트하고 유지 관리할 수 있었으며 궁극적으로 성능이 향상되고 페이지 로드 시간이 단축되었습니다.  우리 개발자들은 빠르고 콘텐츠 중심의 웹사이트를 위한 올인원 웹 프레임워크인   옹호했습니다. 그들은 가장 빠른 콘텐츠 중심 프레임워크를 시험해 보기를 고대하고 있었습니다. 우리 팀의 관심을 끌었던 세 가지 사항은 서버 측 렌더링, 성능 결과 및 유연성이었습니다. Astro를  우리가 원했던 단순한 웹사이트에는 완전한 콘텐츠 관리 시스템(CMS)이 필요하지 않았지만, 기술적인 지식이 없는 팀원도 웹사이트에서 작업할 수 있도록 하고 싶었습니다. 우리는 다양한 CMS 옵션을 광범위하게 조사한 결과 강력한 기능과 사용 편의성 때문에 Sanity를 선택했습니다.   또한 훌륭한 문서와 매우 관대한 무료 등급을 보유하고 있습니다. Sanity는  Astro와 Sanity 외에도 우리는 프로젝트에   사용하기로 결정했습니다. 글쎄, 우리는 항상 그렇습니다. Netlify의 원활한 배포 및 호스팅 기능은 일반적으로 CDN(콘텐츠 전송 네트워크)으로 사용됩니다. 또한 애니메이션을 위한 다양한 라이브러리를 사용했는데, 이에 대해서는 다른 블로그 게시물(곧 제공될 예정)에서 더 자세히 논의했습니다. Netlify를  개선을 위한 한 가지 측면은 잠재 고객이 우리에게 연락할 수 있도록 만든 양식이었습니다. 우리는 Netlify의 양식을 사용했는데 Astro의 Forms 문제로 인해 최선의 선택이 아닌 것으로 판명되었습니다. 솔루션(핫픽스)을 찾았고 문의 양식용 단일 페이지를 만들었습니다. 우리는 미래에 이것을 어떻게 바꿀지 여전히 고려하고 있습니다.  개발 과정  개발 단계를 시작하기 전에 프로젝트 관리자는 팀에서 구축할 모든 기능에 대한 세부 정보가 포함된 제품 백로그를 생성했습니다. 이러한 사용자 스토리는 개발 프로세스를 원활하고 투명하게 만들었습니다. 웹사이트를 구축하기 전에 팀은 첫 번째 웹사이트 제공에 포함될 기능의 우선순위를 정해야 했습니다.  코드 저장소의 경우   사용하고 프로젝트 관리 보드와 스프린트 계획 기능을 활용했습니다. 일반적으로 GH는 버전 제어 시스템으로 선택되지만 우리는   사용하기 시작했고 프로젝트 관리를 위해 그것을 좋아하고 있습니다. GitHub(GH)를 Notion Projects를  우리는 디자인을 구현하기 시작했습니다. 우리는 민첩한 방법론을 따르고 스프린트로 작업하여 설정된 일정 내에 결과를 전달하고 궤도에 올랐는지 확인했습니다. 한 가지 작은 참고 사항: 이것은 내부 프로젝트였으며 우리의 최우선 순위는 고객의 프로젝트였습니다. 이는 우리 팀이 다른 프로젝트에서 휴식을 취한 직후에 스프린트가 발생한다는 것을 의미합니다. 이는 일반적으로 우리가 일하는 방식이 아니지만 이를 관리하는 방식이었고 이를 반복하지 않는 방법을 배웠습니다.  전체 개발 프로세스를 투명하고 민첩하게 만드는 또 다른 중요한 점은 프로젝트 시작부터 바로 스테이징 링크를 확보하는 것이었습니다. 프로젝트에 참여한 모든 사람이 이에 액세스할 수 있었고, 진행 상황을 확인하고, 피드백을 제공하고, 필요하다고 느낄 때 변경하고 작은 조정을 할 수 있었습니다.  개발 단계에서 마케팅팀은 콘텐츠 삽입을 시작할 수 있었습니다. 이는 그들이 Sanity에 익숙해지는 데 도움이 되었고 보다 현실적인 피드백 라운드에 기여했습니다. 전반적으로 개발 단계는 전체 팀이 프로젝트 목표를 달성하기 위해 협력하는 공동 노력이었습니다.  품질 보증  개발 중에 한두 명의 개발자가 모든 기능을 테스트했습니다. 모든 코드는 코드 검토를 거쳤으며, 결국 웹사이트가 제대로 작동하는지 테스트하고 확인하기 위한 최종 스프린트를 수행했습니다.  위에서 설명한 대로 사용성 및 접근성 테스트는 이미 설계 단계에서 수행되었습니다. 일반적인 테스트의 경우 프로젝트 관리자가 작성한 사용자 스토리와 승인 기준을 사용하여 안내했습니다.  기능 테스트: 모든 기능이 예상대로 작동하는지 확인합니다.  성능 테스트: Lighthouse를 사용하여 속도 부하 및 기타 점수를 확인합니다.  브라우저 간 및 장치 간 테스트: 다양한 웹 브라우저(예: Chrome, Firefox, Safari, Edge) 및 장치(데스크톱, 모바일, 태블릿)에서 웹 사이트를 테스트하여 호환성과 일관된 사용자 경험을 보장합니다. 이를 위해   사용했습니다. 그들의 제품은 사용이 매우 직관적이며 많은 테스트를 허용합니다. BrowserStack을  가동 준비  우리는 웹사이트를 스테이징 링크에 게시할 준비가 되어 있었지만 진행하기 전에 두 가지 중요한 사항, 즉 새 도메인으로 리디렉션하는 것과 SEO를 신중하게 고려해야 했습니다. 도메인을 변경할 계획이었기 때문에 SEO 순위가 타격을 받지 않도록 하는 것이 중요했습니다.  따라서 우리는 301 리디렉션을 사용하여 원래 URL이 새 URL로 영구적으로 대체되었음을 검색 엔진과 브라우저에 알리기로 결정했습니다. 우리가 한 일은 다음과 같습니다.  현재 웹사이트의 모든 페이지 목록:  페이지의 URL 구조가 동일하게 유지된 경우 301 리디렉션이 작동하는지 확인하세요.  이전 페이지 URL이 새 웹사이트에 없으면 가장 적절한 페이지로 리디렉션을 만듭니다.  Google에서 색인이 생성된 페이지를 나열하여 모든 페이지에 리디렉션이 적용되었는지 확인하세요.  Netlify를 사용하여 다음 단계에 따라 모든 것을 리디렉션하세요.  .   Netlify 문서  콘솔의 변경사항을 Google에 알립니다.  도구.   주소 변경  이전 페이지가 표시되지 않도록 Google에 새 도메인의 색인을 다시 생성해 달라고 요청하세요. 이 작업은 다음 단계에 따라 Google 콘솔에서 직접 수행되었습니다.   Google 콘솔 문서.  마지막으로, 우리는 더 나은 SEO 순위를 위한 모범 사례를 고려하고 개선이 필요한 부분을 정확히 찾아내는 데 시간을 투자했습니다. 마케팅팀은 다음 사항을 확인했습니다.  검색 엔진 결과에서 더 높은 순위를 원하는 관련 키워드에 대해 새 웹사이트를 최적화하고 유기적인 트래픽을 유도하기 위해 Google 키워드 플래너 또는 SEMrush와 같은 도구를 사용하여 키워드 검색을 수행하여 인기 있고 경쟁이 덜한 키워드를 찾습니다.  우리는 사용자가 검색 엔진 결과 페이지(SERP)에서 클릭하도록 유도하기 위해 관련 키워드와 강력한 클릭 유도 문구를 통합하여 각 웹페이지의 메타 제목 태그와 메타 설명을 최적화하기 위해 최대한 노력했습니다.  URL이 깔끔하고 간결하며 타겟 키워드가 포함되어 있는지 확인했습니다.  대체 텍스트: 적절한 경우 키워드를 활용하여 이미지에 대한 설명이 포함된 대체 텍스트를 제공합니다.  페이지 속도 최적화를 확인합니다(우리가 사용한 스택으로는 여기서 좋은 결과를 얻지 못하는 것이 어려웠습니다).  결과  글쎄요, 웹사이트를 운영하기까지는 긴 여정이었습니다. 하지만 그거 알아? 작업은 출시 후에도 계속되었습니다.  첫 번째 단계는 우리가 달성하고자 하는 것을 위한 강력한 기반이었습니다. 모듈식 접근 방식으로 구축함으로써 새로운 트렌드와 요구 사항에 맞게 웹 사이트를 반복, 변경 및 조정할 수 있는 유연성도 확보되었습니다. 우리는 결과에 만족하며 여기까지 온 방법을 자랑스럽게 생각합니다. 우리의 여정을 공유함으로써 귀하가 새로운 웹사이트를 구축하거나 재설계할 때 무엇을 기대할 수 있는지 알 수 있기를 바랍니다.  여기서 공유한 모든 내용을 요약하기 위해 프로젝트에 사용할 수 있는 작은 치트 시트를 준비했습니다.     게시되었습니다. 여기에도

이 오디오는 이야기의 원래 언어로 제작되었습니다!

훌륭한 웹사이트 디자인의 4단계(치트시트 포함!)

About Author

코멘트

태그 걸기

이 기사는 다음에서 발표되었습니다.

Related Stories

AI/ML 데이터레이크용 참조 아키텍처 구축을 위한 설계자 가이드

HackerNoon 글쓰기 대회에서 우승하고 싶으신가요? #crypto-api 대회 우승자들이 추천하는 내용은 다음과 같습니다.

바다 항해: 데이터 레이크를 사용하여 프로덕션 등급 RAG 애플리케이션 개발

보이지 않는 레이어: 사용자 인터뷰가 대체할 수 없는 자산인 이유

AI/ML 데이터레이크용 참조 아키텍처 구축을 위한 설계자 가이드

HackerNoon 글쓰기 대회에서 우승하고 싶으신가요? #crypto-api 대회 우승자들이 추천하는 내용은 다음과 같습니다.

바다 항해: 데이터 레이크를 사용하여 프로덕션 등급 RAG 애플리케이션 개발

보이지 않는 레이어: 사용자 인터뷰가 대체할 수 없는 자산인 이유

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps