웹 앱 처음부터 만들기 – 8부 1: 기본 아이디어 및 디자인

반응형

이봐! 이 시리즈와 함께 제공되는 소스 코드를 더 이상 다운로드할 수 없다는 사실을 알려드립니다. 우리는 여전히 시리즈에서 얻을 수 있는 귀중한 정보가 있다고 생각하지만, 앞으로 10년 이상 걸릴 것이기 때문에 진보적인 웹 앱을 만들기 위해 현대적인 PHP 프레임워크(라라벨)나 심지어 자바스크립트 프레임워크(리액트 또는 Vue)도 고려해 볼 가치가 있다고 생각합니다.

오늘은 웹 애플리케이션 구축에 관한 8부 시리즈의 1부를 시작하겠습니다. 먼저 아이디어를 소개하면서 일을 시작하겠습니다. 그리고 나서 디자인, UI, 그리고 일반적인 프런트엔드 관련 일을 다룰 것입니다. 우리는 내 친구 Jason Lengstorf의 사이트 Copter Labs를 왔다 갔다 할 것이다. 제이슨은 애플리케이션 계획이나 데이터베이스와 같은 백엔드 업무를 처리할 것입니다. 이번 주말에는 실제 업무용 애플리케이션을 공개하겠습니다. 계획은 다음과 같습니다.

쉽죠, 그렇죠?

우리가 만들 것은 "목록 앱"입니다. 단순성과 유용성에 초점을 맞춘 아이디어입니다. 계정에 등록하고 몇 초 안에 목록을 작성하기 시작합니다. 쉬울 것 같지? 심지어 PHP 도블러들도 아마 이런 것들을 꽤 빨리 조합할 수 있을 겁니다. 그렇죠? 글쎄요, 사실은, 아뇨, 그렇게 쉽지 않아요.

우선, 그게 작동되면서 잘 될 필요가 있습니다. 이는 백엔드 코드가 정상적으로 작동한다는 의미입니다. 이는 직관적이고 유용하며 사용하기 편리한 우수한 UI를 의미합니다. 이는 앱의 보안 및 사용자 데이터의 비공개를 의미합니다. 이것들 중 어느 것도 사소한 것이 아니다.

 

이 8개의 시리즈 전체를 통해, 우리는 이 모든 것을 잘 할 수 있기를 바라는 앱을 만들 것입니다. 우리는 이것이 지금까지 만들어진 것 중 가장 훌륭한 앱이라고 말하려는 것이 아니라, 우리는 이 앱을 앱 생성 과정의 도보 여행으로 사용할 것이며, 우리가 할 수 있는 한 많은 스마트한 것들을 할 수 있기를 희망합니다.

계획, 구상

이 "목록 앱"은 Colored Lists라고 불립니다. 목록(실생활에서)은 할 일 목록, 식료품 목록, 캠핑 목록을 가져오는 것 등 무엇이든 할 수 있습니다. 일을 마치면서, 그것들을 지웁니다. 목록에 있는 것들은 다른 상대적인 중요성도 있을 수 있다. 이로 인해 종이 목록이 잠재적으로 지저분하고 비효율적입니다. 컴퓨터의 목록만 있으면 클릭 한 번으로 항목을 지우고 재배열을 드래그 앤 드롭의 문제로 만들 수 있습니다. 상대적으로 중요한 문제를 다루기 위해, 우리는 색깔화를 사용할 수 있습니다. 이것은 그룹화와 같은 것에도 사용될 수 있습니다. 컴퓨터와 웹은 목록을 위한 완벽한 장소이다.

스케치 잇 아웃

당장 환상을 가질 필요는 없다. 다음은 앱이 어떻게 생겼는지에 대한 기본적인 스케치입니다.

 

내게는 목록처럼 보인다. 각 목록 항목은 긴 직사각형입니다. 왜냐하면 여기서 가장 큰 아이디어는 각 목록 항목을 색칠하는 것이므로 색상 상자에 넣는 것이 좋습니다. 각 목록 항목의 왼쪽과 오른쪽에 몇 가지 대화형 요소가 있습니다. 그것들은 우리가 의도하는 기본적인 것들을 성취하기 위한 것이 될 것입니다. 사람들이 그들의 컬러리스트로 할 수 있도록 말이죠. 좀 더 자세히 살펴보자.

초기 UI 계획

이 시점에서 특정 기술에 대해 반드시 언급하고 싶지는 않지만 UI가 어떻게 작동할지에 대해 생각해야 합니다. 따라서 UI 욕구를 수용할 수 있는 기술을 선택할 수 있습니다.

• 편집하려면 클릭
• 끌어서 놓기
• 두 번 클릭 삭제
• 작업 후 자동 저장
   
  더 스크린스
• 지금까지 아이디어를 빠르게 브레인스토밍하면 꽤 많은 "스크린" 또는 응용 프로그램이 포함될 수 있다고 말할 수 있습니다.
• 이 모든 것들이 기본적으로 많은 AJAX가 됩니다. 목록 항목 삭제와 같은 비교적 사소한 작업을 수행하기 위해 특수 화면을 로드하고 싶지 않습니다. 이러한 작업은 페이지 새로 고침 없이 마우스 클릭에 대한 적절한 피드백과 함께 원활하고 원활하게 수행되어야 합니다. 어떤 의미에서, 우리는 이 앱과의 대부분의 상호작용이 한 페이지에서 일어나는 한 페이지 앱을 만들고 있다. 이것은 확실히 의도적인 것이지, 특정한 유행에 집착하려는 것은 아니다. 목록은 쉽고 빠르기 때문에 유용합니다. 이 앱이 복잡하면 유용성이 떨어지고 아무도 사용하지 않을 것입니다.
• 홈페이지
  로그아웃 = 소개/판매 페이지
  로그인 = 사용자 목록
• 로그아웃 = 소개/판매 페이지
• 로그인 = 사용자 목록
• 로그인 페이지
• 설정 페이지
• 분실된 암호 페이지
• 계정 활성화 페이지
• 이메일"특징"사람들은 "특징"을 좋아한다. 다른 앱이 가지고 있지 않거나 사용자의 앱이 가지고 있는 것이 더 좋습니다. 이것은 당신의 실제 제품에 대한 것만큼이나 마케팅을 위한 것이다. 이 앱이 가지고 있는 모든 화려한 AJAX는 확실히 기능이지만, 요즘 그러한 것들은 기능보다는 점점 더 기대되고 있다. 이 앱에서 중점적으로 다룰 기능 중 하나는 "공개 공유"입니다. 각 목록에는 공개적으로 공유할 수 있는 고유한 URL이 있습니다. 이 URL을 방문하는 방문자는 정확한 현재 상태로 목록을 볼 수 있지만 편집/추가/삭제까지는 이 URL과 상호 작용하지 않습니다.이제 우리가 무엇을 만들고자 하는가에 대한 아이디어를 얻었으니, 다음 파트에서는 서버측 기술에 대해 알아보도록 하겠습니다.
• 다음 단계로 이동
•  
• 그렇다, 심지어 이메일도 그 과정과 앱과의 상호작용의 중요한 부분이기 때문에 "스크린"의 일부로 여겨져야 한다.