웹서비스 기획부터 배포까지 (2) - 기획과 와이어프레임

들어가며💭

아무리 간단한 웹사이트라고 한들,

타겟 사용자와 요구사항을 파악하는 것은 서비스의 방향성은 물론 이후 개발 단계까지 동일한 목표를 향해 나아갈 수 있게 해준다.

1인 프로젝트를 해도 마찬가지이다. 예전에 뾰족한 목표만 가지고선 구체적인 계획없이 머리속에 그려가며 혼자 개발을 한 적이 있었는데

그렇게 했더니 개발을 하면서도 계속 고민을 거듭하며 ui/ux가 바뀌고 기능이 추가되고 그랬더란다.

좋게 말하면 더 좋은 프로덕트를 만들기 위해서 빠른 수정과 실행력이 있었다고 볼 수 있지만

냉정하게 말하면 목적지 없는 항해를 시작하는 것과 같았다. 그때의 경험으로 프로젝트의 빠른 달성을 위해서는 초석을 잘 다지는 것이 중요하다고 느꼈고, 이번에 간단한 초기 기획과 와이어프레임으로 프로젝트 목표를 빠르게 달성하고자 한다.

 

물론 유저플로우, 기능명세서, 아키텍터 설계 등.. 과 같은 과정이 더 필요하지만 

지금의 정적 웹사이트의 규모라면 과한 설계는 불필요하다고 판단되어 설계 단계를 크게 축소하였다.

 

🎯주요 타겟층 분석

• 저렴한 요금제와 간편한 개통 과정을 선호하는 사용자들
• 여행자, 임시 거주자 단기간 동안 휴대폰을 사용하는 사람들
• 인터넷과 모바일 앱을 통해 비대면으로 신속하게 개통을 원하는 사용자들

 

📜유저 시나리오 

▪️ 신규 고객 – 선불 유심 개통 접수

     목적: 신규 고객이 개통앱을 설치 하여 개통 접수

• 홈페이지 방문
  • 사용자: 웹 검색을 통해  홈페이지에 접속
  • 행동: 홈페이지의 메인 배너에서 "온라인 개통하기" 버튼 클릭
• 요금제 안내
  • 사용자: '요금제 안내' 메뉴를 클릭하여 요금제 안내 페이지로 이동
  • 행동:  요금제 페이지에서 다양한 요금제 옵션을 검토
• 개통 방법 안내
  • 사용자: "개통 방법" 메뉴 클릭하여 개통 절차 페이지로 이동
  • 행동: 사용자가 개통 절차 안내문을 보고 개통 접수를 한다.

 

▪️ 고객 지원 – 문제 해결

 

    목적: 고객이 서비스 문제를 해결하기 위해 지원 요청

• 지원 요청
  • 사용자: 홈페이지 상단 메뉴에서 "상담 문의"을 선택
  • 행동: "상담 문의" 페이지로 이동하여 카카오톡 상담톡, 전화 등 지원 요청
  • 요청: 문제 설명 및 지원 요청 메시지 전송

 

📍주요기능

    ▪️ 카카오톡 채널톡 채팅 연결

고객이 서비스 문제를 해결하기 위한 지원 요청 

https://developers.kakao.com/tool/social-plugin/channel/chat
https://developers.kakao.com/docs/latest/ko/kakaotalk-channel/common

Kakao Developers

 

Kakao Developers

 

🗃️메뉴 구성

1. 요금제 안내

2. 개통 방법 

3.  KT망 개통 안내

4. LG망 개통 안내

5. 상담 문의

 

📟와이어프레임

 

https://www.figma.com/board/a6C4VVpYskU052KbFIDMv6/Untitled?node-id=0-1&t=ij1MGSE865qFSwri-1

Figma

더 자세히 확인하려면 위 피그마 파일을 참고해주세요:)

 

▪️ 웹 화면 설계

 

 

▪️ 앱 화면 설계

(피그마는 이제 좀 익숙해 진 것 같다.)

 

 

 

✅웹사이트 레퍼런스

https://n-telecom.or.kr/?n_media=8753&n_query=선불유심개통&n_rank=1&n_ad_group=grp-a001-01-000000042231651&n_ad=nad-a001-01-000000300505161&n_keyword_id=nkw-a001-01-

000006213195729&n_keyword=선불유심개통&n_campaign_type=1&n_ad_group_type=1&n_match=1

앤텔레콤셀프개통