개인 와이어프레임(Figma) 및 디자인 → 구현 + Git

 

와이어프레임(Wireframe)

이건 와이어프레임이 아닌데...?라고 생각할 수 있다.
프로젝트 당시, 팀 내 디자이너가 나 밖에 없었기 때문에
팀원들의 이해를 돕기 위해 피그마에서 와이어프레임+디자인(러프)을 같이 진행했다.

 

▲ 초창기 와이어프레임과 기능 설명

 

 

 

▲ 프로젝트 사이트맵

 

 

 

▲ 담당 페이지(챌린지) - 플로우차트(flow chart)

(보강을 해야하는데 대략적인 흐름은 맞아서 그냥 이정도에서 마무리했다.)

 

 

---

 

피그마 목업(Mock-Up)
-
챌린지+챌린지 피드 페이지 담당

 

▲ 챌린지 메인 화면

 

 

 

▲ 챌린지 정보/참여 모달

 

 

 

▲ 챌린지 생성 모달

 

 

 

▲ 챌린지 피드 메인 화면(진행 중)

 

 

 

▲ 챌린지 피드 메인 화면(완료)

 

 

 

▲ 새 챌린지 피드 만들기 모달

 

 

 

▲ 챌린지 피드 수정/삭제/링크 모달

 

 

 

▲ 챌린지 피드 수정 모달

 

 

 

▲ 챌린지 경고 모달

 

 

 

▲ 챌린지 피드 댓글 모달(현재 세션 접속자 == 작성자일 경우, 수정/삭제 버튼 활성화)

 

 

 

▲ 챌린지 피드 정보/신고 모달

 

 

 

---

 

 

실제 구현 화면

아래 이미지가 실제 구현 페이지다.
(화면/기능 구현을 완료한 상태)

 

[챌린지 메인 화면]

챌린지 완료 시 안 보이게 + 12개 이상일 경우, 페이지네이션 + 챌린지 생성 등등...
(카테고리 필터링하고 싶었는데 제대로 구현 못 해서 아쉽다)

 

 

 

[챌린지 생성 모달]

 

 

등등... 많은 구현 페이지가 있지만 대표적으로 위 두 개만 작성하겠다.

 

---

 

 

Git

 

https://github.com/gomji94/doself.git

 

 

 

---

 

 

마치며

이 글은 단순한 개발 포트폴리오가 목적이 아니다.
기획부터 구현까지 전 과정에 직접 참여한 경험이
PM으로서의 시각을 형성하는 데 실질적인 자산이 되었다고 판단했기 때문에 작성했다.


+) 티스토리 이미지 업로드 오류가 반복되는 점이 매우 아쉽다.
블로그의 핵심 기능인 글과 이미지 중,
이미지에 문제가 반복적으로 발생하는 것은 개선이 필요해 보인다.
해당 이슈로 민원을 접수했으나 일주일 이상 처리되지 않아,
결국 수작업으로 문제가 발생한 13개의 이미지를 다시 첨부했다.
사용자가 이렇게 수작업으로 대응해야 하는 것이 적절한지 의문이다.
관련 담당자 측의 해당 문제에 대한 추후 관리 및 개선이 이루어지길 바란다.