안녕하세요! 🙋♂️ 2년차 기획자 '제로콜라는살안쪄요🥤'입니다!
이 글의 목적은 막 IT이세계에 도착한 기획 모험가들을 위해 실전에서 먹히는 기능별 기획들을 하나하나 소개하는 것입니다.
이미 많은 기획 지침서들이 기획이 뭔지, 기획이라는 큰 그림을 잘 설명하고 있지요.
그래서 저는 제가 배운 것들 중 그 큰 그림에 쓰이는 부품들을 설명할 예정입니다.
사수 없이 홀로 성장하는 초보 기획자분들이 이 글들을 보고 아주 조금이나마 도움이 되었으면 좋겠네요!
부족한 점이 있다면 언제든지 댓글로 알려주세요!
1. Text input box
직역하자면 텍스트를 입력하는 박스라는 의미로, 네모난 칸에 영역을 클릭하고 그 안에서 커서가 깜빡깜빡 거려 키보드를 치면 글자가 입력되는, 텍스트를 입력할 수 있는 영역이다.
그 안에서는 글자를 입력하거나 숫자 등 우리가 키보드로 치는 모든 문자를 입력할 수 있다. '입력'의 가장 기초인 영역이다.
이 간단한 Text input box가 모양이 많이 변경되어 변형이 나오긴 하지만 기능면에서는 다름이 없다. 그
러나 기능면에서는 다름이 없지만, 이 하나의 네모만으로도 기획적으로 고려할 수 있는 일은 무궁무진하다.
보통 텍스트 박스라고 부르면 대부분 안다.
추가로, 이 텍스트 박스 안에 이미 들어가 있고 클릭하면 사라지는 의미 없는 글은 Placeholder라고 부른다.
2. 유효성 체크(Vaildation check)
유효성 체크(또는 유효성 검사)는 데이터가 유효한지 확인하는 일련의 행위이다. '기획하는 창업가'님의 정의는 '동작 시 필요한 서비스 정책'이라고도 하신다.(https://brunch.co.kr/@firstevan/10)
어떠한 규칙이 있다면 그것에 맞는지 체크해주고, 정보가 있으면 이 정보가 맞는지 체크하는 것을 유효성 체크라고 이해하면 편할 것이라고 생각한다.
유효성 체크의 종류는 크게는 두 가지로 나눌 수 있다.
1) 실시간 유효성 체크
2) 액션을 통한 유효성 체크
이 두 가지의 차이점은 서버와 통신하느냐 하지 않느냐로 보면 이해하기 편할 것이다.
- 실시간 유효성 체크
실시간 유효성 체크는 다른 매체를 통할 필요 없이, 또는 통신할 필요 없이 유효성을 체크할 수 있는 것을 말한다.
대표적으로 '규칙'같은 것이 있겠다. 비밀번호 입력할 때 다른 것 할 필요 없이 규칙이 맞는지 안 맞는지 봐주면 되니까 서버를 통신할 필요가 없다. - 액션을 통한 유효성 체크
액션을 통한 유효성 체크는 말 그대로, 어떠한 액션을 취해야만 유효성을 체크할 수 있는 것을 말한다.
다른 매체를 통하거나 통신해야만 확인할 수 있는 정보들을 다룰 때 주로 사용한다.
백문이 불여일견이라, 예시를 통해 알아보자.
3. 예시를 통해 알아봅시다.
3.1 비밀번호 입력(회원 가입)
비밀번호 입력은 아이디의 단짝 친구이다.
대신 조금 까탈스러운 친구인데, 보기보다 민감하신 분이라 규칙이 있으셔야 한다.
일반적으로 비밀번호는 영문 대소문자와 숫자, 특수문자 선에서 규칙이 정해진다. 그리고 그 비밀번호의 길이도 제한을 둔다.
보안적인 측면에서는 비밀번호의 길이 제한이 있다는 것은 말이 안 되지만, 암묵적인 룰과 같다.
이 외에도, 같은 문자 연속적으로 입력 불가, 거꾸로 된 알파벳 순서 등 규칙은 만들고 싶은 대로 만들어도 된다.
근데 그렇게 하면 조건에 대한 케이스가 늘어나게 되는 셈이라서 일반적인 것들만 챙겨도 충분하다.
네이버느님의 회원 가입할 때 비밀번호 입력을 하는 것을 보자.
입력을 한 뒤, 탭이나, 비어있는 영역을 클릭해서 영역을 이탈하면 유효성 검사가 이루어지는 모습을 볼 수 있다.
이는 실시간 유효성 체크를 사용한 결과다. 페이지 내에 규칙을 검사할 수 있는 코드가 삽입되어 있어서, 사용자가 입력하는 즉시, 규칙이 맞는지 검사하고, 검사 결과에 따라 결과값을 표출해준다.
3.2 비밀번호 입력(로그인)
이번엔 네이버느님의 로그인할 때 비밀번호를 입력하는 것을 보자.
비밀번호를 입력 한 뒤, 영역을 이탈했는데도 유효성 검사가 이루어지지 않다가, [로그인] 버튼을 누르니까 유효성 검사가 이루어지는 모습이다.
이는 액션을 통한 유효성 체크를 사용한 결과이다.
비밀번호는 굉장한 민감정보이기 때문에, 실시간 유효성 체크처럼 페이지에 규칙을 박아 넣는 것처럼 정보를 저장하면 안 된다.
만에 하나 비밀번호를 저장하면 실시간으로 유효성 체크가 가능해지지만, 실시간 유효성 체크가 가능한 대신에 실시간 해킹을 얻을 것이다.
핵폭발급 큰일이 난다.
그러니 비밀번호 정보가 안전하게 저장되어있는 서버에 물어봐서 이 비밀번호가 맞는지 안 맞는지 확인해 달라고 해야 한다.
이런 상황에서 비밀번호를 입력하고 나서 영역을 이탈했는데도 유효성 검사가 이루어져야 한다는 생각은,
사람과 대화를 해야 하는데 나는(클라이언트 또는 클라) 머릿속으로 하고 싶은 말하고 상대방이 알아듣기를 바라는 것과 똑같다.
그래서 [로그인] 버튼을 눌러서 입 밖으로 '야, 이 비밀번호가 맞니?'라고 상대방에게 물어봐야 한다.
그러면 상대방인 서버가 비밀번호가 맞다면, 바로 로그인시켜줄 것이고, 틀리다면 '응 이거 아니야!'라는 표시로 '가입하지 않은 아이디거나, 잘못된 비밀번호입니다.'라는 에러 메시지를 노출해주는 것이다.
3.3 비밀번호 변경
비밀번호 변경의 전통적인 방식은 다음과 같이 구성되어 있다.
1) 현재 비밀번호 입력
2) 새 비밀번호 입력
3) 새 비밀번호 확인
여기서는 실시간 유효성 체크와 액션을 통한 유효성 체크 둘 다 사용한다.
야놀자느님의 비밀번호 변경을 확인해보자.
1) '현재 비밀번호 입력'에서는 액션을 통한 유효성 체크를 이용했고
2), 3)에서는 실시간 유효성 체크를 한 모습을 볼 수 있다.
1) '현재 비밀번호 입력'은 서버와 통신해야 하기 때문에 내가(클라이언트) 무엇을 입력하든 반응이 없는 모습이다.
그런데 2), 3)에 값을 입력하니까 입력하자마자 에러 메시지가 떠서 규칙을 확인해주는 모습이다.
Text input box에 모든 정보와 규칙이 통과되니 [저장] 버튼이 활성화되게 되고, 버튼을 눌러 서버와 입력한 현재 비밀번호가 이전 비밀번호가 맞는지만 확인한다.
지금은 틀렸으니 팝업을 노출시켜준다.
비밀번호가 맞았으면, 저장되었다는 팝업이 뜨거나, 데이터를 서버에 저장하고 새로고침하든지 할 것이다.
왜 [저장] 버튼을 비활성화시켰다가 조건에 만족하니 활성화를 시켰을까?
나의 생각으로는, 예외상황을 한 번에 대처하기 위함이라고 해석한다.
만약에 [저장] 버튼을 언제나 활성화한다고 생각해보자. 고려해야 될 것이 한두 가지가 아니다.
1) 아무것도 입력 안 했을 때는?
2) 현재 비밀번호만 입력했을 때는?
3) 새 비밀번호만 입력했을 때는?
4) 현재 비밀번호하고 새 비밀번호만 입력했을 때는? ....
이걸 하나하나 막는 것 자체가 기획/개발적 에너지 소모다. 차라리 조건에 만족했을 때만 다음 스텝을 밟을 수 있게 하는 게 기획/개발적으로 엘레강트하다.
4. 그래도 모르겠으면 이대로 합시다.
화면설계서에 작성하는 Description을 기준으로 작성합니다.
아주아주 일반적이고 전통적인 것을 기준으로 한 Description이니, 참고만 해주세요.
여기서 중요한 점은 해당 내용이 반드시 기획 의도와 목적에 맞아야 한다는 점입니다.
4.1 로그인할 때 비밀번호 입력 (액션을 통한 유효성 체크/버튼 상시 활성화 및 에러메세지 노출 기준)
비밀번호
- Placeholder : '비밀번호를 입력해주세요.'
- 영문 대소문자/숫자/특수문자 외 입력 불가
- 글자 수 제한 없음
[로그인] 버튼
- Default : 활성화
- Text box 미입력 상태에서 버튼 클릭 시, 조건에 맞는 에러메세지 노출 (유효성 체크는 Case를 그림으로 그려주거나, 표로 만들어 정리하는 것이 보기 깔끔합니다.)
⎿ 아이디 미입력 상태일 경우, 아이디 Text input box 하단에 '아이디를 입력해주세요' 에러메세지 노출
⎿ 비밀번호 미입력 상태일 경우, 비밀번호 Text input box 하단에 '비밀번호를 입력해주세요' 에러메세지 노출- 아이디, 비밀번호 입력 상태에서 버튼 클릭 시, 아이디와 비밀번호 유효성 확인
⎿ 아이디, 비밀번호 유효성 확인 통과 시, 해당 계정으로 로그인
⎿ 아이디, 비밀번호 둘 중 하나라도 일치하지 않는 경우, '가입하지 않은 아이디거나, 잘못된 비밀번호입니다.' 에러메세지 노출
4.2 비밀번호 변경 (액션을 통한 유효성 체크, 실시간 유효성 체크/버튼 조건적 활성화 및 에러메세지 노출 기준)
현재 비밀번호
- Placeholder : '현재 비밀번호'
- 영문 대소문자/숫자/특수문자 외 입력 불가
- [저장] 버튼 클릭 시, 유효성 체크
새 비밀번호
- Placeholder : '최소 8자 이상, 영문 대소문자'
- 영문 대소문자/숫자/특수문자 외 입력 불가
- 비밀번호 정책 : 최소 8자 이상, 영문 대소문자, 숫자 및 특수문자 모두 포함 (구글 비밀번호 정책입니다.)
⎿ 사용 가능 특수문자 : ~!@#$%^&*()_
⎿ 해당 영역 이탈 시 조건에 맞지 않는 경우 '최소 8자 이상, 영문 대소문자, 숫자 및 특수문자를 모두 포함해주세요.' 에러메세지 노출
⎿ 에러메세지 노출 후 해당 영역을 공란으로 만들경우 '새 비밀번호를 입력해주세요.' 에러메세지 노출
새 비밀번호 확인
- Placeholder : '새 비밀번호 확인'
- 영문 대소문자/숫자/특수문자 외 입력 불가
- 새 비밀번호와 일치하지 않을 경우 '새 비밀번호와 일치하지 않습니다.' 에러메세지 노출
[저장] 버튼
- Default : 비활성화
⎿ 현재 비밀번호, 새 비밀번호, 새 비밀번호 확인에 정보가 입력되어있고, 조건에 맞을 경우 버튼 활성화- 버튼 활성화 상태에서 클릭 시, 현재 비밀번호 유효성 체크
⎿ 해당 계정과 현재 비밀번호 일치하지 않을 경우, 현재 비밀번호 Text input box 하단에 '비밀번호가 일치하지 않습니다.' 에러메세지 노출
⎿ 해당 계정과 현재 비밀번호 일치할 경우, 새 비밀번호 데이터 저장 후 비밀번호 변경 팝업 노출
Description에 글로만 작성하게 되면 개발자분들이 이해가 어려울 수 있으니 적절하게 그림이나 표로 설명하는 편이 더 낫습니다.
위의 내용은 예시니 이런 식으로 작성하면 되는구나만 겟하시면 충분합니다.
해당 문서는 짬 날때마다 계속계속 추가하고 수정하겠습니다
뭐든 부족한 점이 보인다면 댓글 달아서 알려주세요!🙃 