개인프로젝트/대한광고_광고커머스_웹사이트

[3화] 웹사이트를 만들때 디자인은 어떻게 하고 고객 업무 프로세스는 어떻게 정리할까? - 고객 업무 프로세스 및 관련 웹사이트 벤치마킹 하기

티멀 2024. 5. 9. 16:25
728x90
반응형
실무 웹사이트 리메이크 일대기 3화

1. 서비스 분석

업무 프로세스를 미리 정리하여 빠르게 개발하자

 

MVP 서비스를 개발할 때 개인적으로 제일 중요하게 생각하는 것이 고객이나 나의 서비스의 기존 업무 프로세스가 무엇인지 정리하는 것이다.

 

이 정리한 업무들로 추후 필요한 기능을 제안하거나, 업무 중 반복하는 과정은 프로그램을 통해 최대한 자동화를 하여 사용자와 관리자의 편의성을 최대한 증진시키는 것에 목표를 둔다.

 

결국 프로그램의 목적 의의는 사용자 그리고 관리자의 편의성 증진이니까!

 

이번 고객?(지인) 분은 이런 프로젝트 자체가 처음이시기에, 업무 프로세스 정리를 하는데 어려움을 겪는 것 같아, 개인적으로 파악한 업무 프로세스를 보기 쉽게 시각화하여 정리해보았다.

 

DRAWIO를 사용하여 무료로 만든 맵

 

처음 해보았지만, 생각보다 무료 툴인 'DRAW.IO'가 쉽고 잘 되어있어서 빠르게 만들 수 있었음!

 

Flowchart Maker & Online Diagram Software

Flowchart Maker and Online Diagram Software draw.io is free online diagram software. You can use it as a flowchart maker, network diagram software, to create UML online, as an ER diagram tool, to design database schema, to build BPMN online, as a circuit d

app.diagrams.net

 

 

이 업무 프로세스를 정의하는 것이 매우 중요하다.

 

막상 서비스를 개발 혹은 고도화 시키려고 해도 이런 업무 프로세스 정의 없이는, 어떤 기능을 추가로 고도화시킬지, 어떤 업무 프로세스를 자동화 할지 전혀 모를 것이니까!

 

보물찾기로 가볍게 비유해보자면, 보물지도 없이 배 타고 망망대해를 헤쳐나가는 것이 아닐까 생각한다.

 

이렇게 만든 업무 프로세스를 지인분께 보여드리고, 확답 받은 후에 개발에 착수했다.


2. 설계

디자인 지옥 - 서비스 벤치마킹 하는 법

 

솔직히 기능 개발은 어렵지 않은데, 개인적으로 디자인 관련 (UI, UX) 설계가 너무 어렵다.

 

막상 서비스를 개발해놓아도 사용자의 서비스 사용 경험이 불편하며, 적재적소에 적합한 디자인 그리고 components들이 배치되지 않으면, 아무리 기능이 좋아도 서비스 개발은 실패한 것과 다름이 없다.

 

즉, 디자인 관련 설계도 매우 중요한 부분이기 때문에, 개발하려는 서비스와 유사한 서비스를 참고하여 UI, UX를 설계한다.

 

이번 케이스 같은 경우는 광고(현수막, 배너 등)의 E-COMMERCE 웹사이트 였기 때문에, 네이버, 그리고 구글에 관련 키워드를 검색하여 상위권에 있는 사이트를 많이 참고했다.

 

한줄요약: 관련 서비스를 제공하는 다른 유사 사이트의 디자인을 베끼자

 


그렇게 만든 페이지 샘플들!

메인 페이지 좌 -> 우로 바뀐 모습

 

일단 메인페이지는 최대한 깔끔하게 CAROUSEL과 하단 카드 COMPONENTS들을 사용해서 어떤 상품을 판매하는지 볼 수 있게 만들었고,

 


 

로그인

 

회원가입

 

로그인 페이지와 회원가입 페이지는 배경과 최대한 색깔 매치가 되게 MODAL 사용.

그리고 편리한 로그인을 위해 SNS로그인을 도입했다.

 


주문 페이지

 

주문 페이지가 조금 개인적으로 만족스럽게 잘 뽑힌 것 같다.

깔끔해진? :) 미리 보기 사진도 넣어놨다.

 


 

이 외에도 주문 목록 리스트 등 많은 페이지 작업이 있었는데, 기존에 배운 기술들을 복습도 하고 기존 서비스 프로세스 분석, 분석을 기반한 아키텍쳐 설계 등을 재현해보니까 개인적으로 공부를 조금 재밌게 할 수 있었던 것 같다.

그냥 다시 다 만들었다고 봐도 무방한...

 

최근 배우고 있는 AWS 내에 있는 S3 기능도 사용해보고, 신기신기 

 

DB 설계

 

현재는 기존에 파악한 업무 프로세스를 가지고 기초 DB 설계를 했는데, 추후 DB 설계가 바뀔 가능성이 농후하므로 FK와 INDEX는 따로 설정해놓지 않았다.

 

하지만, 확장성은 충분히 고려하여, CODE마스터 테이블이나 유저 주소 테이블 등을 1대 다 구조로 설계해놓았기 때문에, 확장성면에서는 충분히 괜찮아보인다.

 

나중에 캐싱을 위해 REDIS를 도입하고 가상화 서비스를 위해서 DOCKER도 추가적으로 도입할 예정

 

728x90
반응형