목차
1 오늘 학습 흐름
2 UI/UX 특강 개요
3 UI와 UX의 차이
4 페르소나
5 고객 여정 지도
6 사이트맵
7 와이어프레임
8 프로토타입
9 CodeMate 서비스 기획
10 고객 여정 지도 설계 내용
11 사이트맵 설계 내용
12 Figma 프로토타입 제작 및 제출
13 오늘 학습한 핵심 정리
1 오늘 학습 흐름
1) 개발자를 위한 UI/UX 특강
(1) 오늘 학습 내용
오늘은 개발자를 위한 UI/UX 특강을 들었다.
단순히 화면을 예쁘게 만드는 것이 아니라, 사용자의 문제를 이해하고 그 문제를 해결하는 서비스 구조를 설계하는 과정을 학습했다.
(2) 실습 흐름
오늘 실습은 페르소나 작성, 고객 여정 지도 작성, 사이트맵 설계, 와이어프레임 제작, 프로토타입 제작 및 링크 제출 순서로 진행되었다.
(3) 핵심 목표
오늘의 핵심은 사용자의 문제를 먼저 파악하고, 그 사용자가 서비스를 이용하는 흐름에 맞춰 기능과 화면 구조를 설계하는 것이다.
(4) 오늘 만든 서비스
나는 초보 개발자 학습 관리 모바일 앱인 CodeMate를 기획했다.
CodeMate는 개발 공부를 시작한 초보자가 개념 정리, 실습 코드, 에러 해결 기록, 복습을 한곳에서 관리할 수 있도록 돕는 서비스이다.2 UI/UX 특강 개요
1) UI/UX의 필요성
(1) 개발자에게 UI/UX가 필요한 이유
개발자는 기능 구현에 집중하기 쉽다.
하지만 실제 사용자는 기능이 존재하는 것뿐만 아니라, 그 기능을 얼마나 쉽게 찾고 사용할 수 있는지를 중요하게 느낀다.
(2) 좋은 서비스의 기준
좋은 서비스는 단순히 기능이 많은 서비스가 아니다.
사용자의 문제를 정확히 해결하고, 사용자가 헷갈리지 않게 자연스러운 흐름을 제공하는 서비스가 좋은 서비스이다.
(3) 오늘 특강의 의미
오늘 특강을 통해 개발자는 코드를 작성하기 전에 사용자의 상황, 감정, 행동, 문제점을 먼저 이해해야 한다는 것을 배웠다.
즉, 개발은 기능 구현에서 시작되는 것이 아니라 사용자 이해에서 시작된다는 점을 알 수 있었다.3 UI와 UX의 차이
1) UI
(1) UI의 의미
UI는 User Interface의 줄임말이다.
사용자가 서비스를 사용할 때 직접 보고 클릭하는 화면 요소를 의미한다.
(2) UI 요소
버튼, 메뉴, 입력창, 아이콘, 색상, 폰트, 레이아웃 등이 UI에 해당한다.
사용자는 UI를 통해 서비스와 상호작용한다.
(3) UI의 핵심
UI는 사용자가 기능을 쉽게 찾고 사용할 수 있도록 화면을 구성하는 것이다.
보기 좋은 디자인도 중요하지만, 사용하기 쉬운 구조가 더 중요하다.
2) UX
(1) UX의 의미
UX는 User Experience의 줄임말이다.
사용자가 서비스를 이용하면서 느끼는 전체 경험을 의미한다.
(2) UX의 범위
UX는 화면 디자인뿐만 아니라 사용자의 감정, 행동 흐름, 불편함, 만족감까지 포함한다.
사용자가 서비스를 처음 발견하고, 가입하고, 기능을 사용하고, 다시 돌아오는 전체 과정이 UX에 해당한다.
(3) UX의 핵심
UX는 사용자가 원하는 목표를 편하고 자연스럽게 달성할 수 있도록 만드는 것이다.
사용자가 중간에 막히거나 헷갈리지 않도록 흐름을 설계해야 한다.
3) UI와 UX의 관계
(1) UI는 UX의 일부이다
UI는 사용자가 직접 만나는 화면이고, UX는 그 화면을 포함한 전체 경험이다.
좋은 UI는 좋은 UX를 만드는 데 중요한 역할을 한다.
(2) 예시
버튼이 예쁘게 생겼더라도 사용자가 어디를 눌러야 할지 모르면 좋은 UX라고 할 수 없다.
반대로 화면이 단순하더라도 사용자가 원하는 기능을 빠르게 찾고 사용할 수 있다면 좋은 UX가 될 수 있다.4 페르소나
1) 페르소나의 의미
(1) 페르소나
페르소나는 서비스를 사용할 대표 사용자를 구체적인 인물처럼 설정한 것이다.
실제 사용자를 상상하기 쉽게 이름, 상황, 목표, 문제점 등을 정리한다.
(2) 페르소나를 만드는 이유
모든 사용자를 막연하게 생각하면 서비스 방향이 흐려질 수 있다.
특정 사용자를 구체적으로 설정하면 그 사람이 어떤 기능을 필요로 하는지 더 명확하게 알 수 있다.
(3) 개발자 관점에서의 의미
개발자는 기능 중심으로 생각하기 쉽지만, 페르소나를 만들면 사용자 중심으로 사고할 수 있다.
“이 기능이 필요한가?”보다 “이 사용자가 이 기능을 왜 필요로 하는가?”를 생각하게 된다.
2) 오늘 설정한 페르소나
(1) 페르소나 이름
오늘 설계한 CodeMate의 페르소나는 초보 개발자 현우이다.
(2) 페르소나 상황
현우는 개발 공부를 막 시작한 입문자이다.
실습 중 에러가 자주 발생하고, 해결 방법을 검색해서 해결하더라도 나중에 다시 기억하지 못하는 문제가 있다.
(3) 페르소나 문제
현우는 에러 원인을 파악하기 어렵고, 공부한 내용을 체계적으로 정리하기 힘들어한다.
또한 개념 정리, 실습 코드, 에러 해결 과정을 따로 관리하다 보니 복습이 어렵다.
(4) 페르소나 목표
현우는 자신이 배운 개념, 실습 기록, 에러 해결 방법을 한곳에 정리하고 싶어 한다.
나중에 같은 문제가 발생했을 때 빠르게 검색하고 다시 복습할 수 있는 서비스를 원한다.5 고객 여정 지도
1) 고객 여정 지도의 의미
(1) 고객 여정 지도
고객 여정 지도는 사용자가 서비스를 이용하는 전체 과정을 단계별로 정리한 것이다.
사용자가 어떤 행동을 하고, 어떤 생각을 하며, 어떤 불편함을 느끼는지 한눈에 볼 수 있게 만든다.
(2) 구성 요소
고객 여정 지도에는 단계, 행동, 생각, 접점, 문제점, 개선 기회 등이 들어간다.
(3) 사용하는 이유
고객 여정 지도를 만들면 사용자가 어디에서 불편함을 느끼는지 알 수 있다.
그리고 그 불편함을 해결하기 위해 어떤 기능이 필요한지 도출할 수 있다.
2) 오늘 만든 고객 여정 단계
(1) 1단계 문제 인식
사용자는 실습 중 에러를 만나고, 원인을 파악하지 못해 어려움을 느낀다.
해결 방법을 검색하지만 어떤 자료가 정확한지 판단하기 어렵다.
(2) 2단계 서비스 탐색
사용자는 개발 공부 기록 서비스를 검색하고 여러 서비스를 비교한다.
개념과 에러를 함께 정리할 수 있는 서비스가 필요하다고 느낀다.
(3) 3단계 가입 및 첫 사용
사용자는 회원가입을 하고 과목별 카테고리를 만든다.
처음에는 기능이 많아 어디서부터 써야 할지 고민할 수 있다.
(4) 4단계 학습 기록
사용자는 오늘 배운 개념, 실습 코드, 에러와 해결 방법을 기록한다.
기록을 저장하면서 나중에 다시 복습할 수 있다는 안정감을 느낀다.
(5) 5단계 복습 및 지속 사용
사용자는 이전 기록을 검색하고 복습 알림을 확인한다.
자신의 학습 진도와 약점을 확인하면서 지속적으로 학습을 관리한다.6 사이트맵
1) 사이트맵의 의미
(1) 사이트맵
사이트맵은 서비스의 전체 메뉴 구조를 정리한 지도이다.
사용자가 어떤 메뉴를 통해 어떤 기능으로 이동할 수 있는지 보여준다.
(2) 필요한 이유
사이트맵을 만들면 서비스의 정보 구조를 먼저 정리할 수 있다.
화면을 만들기 전에 어떤 기능이 어디에 위치해야 하는지 정할 수 있다.
(3) 개발자 관점에서의 의미
사이트맵은 나중에 페이지 구조, URL 설계, Controller 설계와도 연결될 수 있다.
즉, UI/UX 설계뿐만 아니라 실제 개발 구조를 잡는 데도 도움이 된다.
2) CodeMate 사이트맵 구조
(1) 홈
홈은 서비스의 시작점이다.
사용자는 홈에서 주요 기능으로 이동할 수 있다.
(2) 대시보드
대시보드에서는 학습 현황 요약, 최근 학습 기록, 복습 알림, 진도 통계, 약점 분석 요약을 확인할 수 있다.
사용자가 현재 자신의 학습 상태를 한눈에 파악하는 공간이다.
(3) 과목 관리
과목 관리에서는 과목 목록, 과목 추가, 과목별 설정, 카테고리와 태그 관리를 할 수 있다.
초보 개발자가 Java, Spring, SQL처럼 과목별로 학습 내용을 정리할 수 있게 돕는다.
(4) 학습 기록
학습 기록은 개념 정리와 실습 기록으로 나누었다.
개념 목록, 개념 작성, 개념 상세 보기와 실습 목록, 실습 작성, 코드 저장, 파일 첨부, 실습 상세 보기 기능을 포함한다.
(5) 에러 기록
에러 기록에서는 에러 목록, 에러 작성, 에러 상세 보기, 해결 방법 정리, 관련 실습과 개념 연결 기능을 제공한다.
초보 개발자가 같은 에러를 반복해서 검색하지 않도록 돕는 핵심 메뉴이다.
(6) 복습 관리
복습 관리에서는 복습 목록, 복습 계획 설정, 복습 알림 설정, 복습 진행, 복습 완료 기록을 관리한다.
기록한 내용을 실제 학습 성과로 연결하기 위한 기능이다.
(7) 검색
검색 메뉴에서는 통합 검색, 개념 검색, 에러 검색, 코드 검색, 태그 검색을 제공한다.
사용자가 과거 기록을 빠르게 찾을 수 있도록 돕는다.
(8) 마이페이지
마이페이지에서는 프로필 관리, 학습 목표 설정, 알림 설정, 데이터 백업과 내보내기, 로그아웃 기능을 제공한다.7 와이어프레임
1) 와이어프레임의 의미
(1) 와이어프레임
와이어프레임은 실제 디자인을 하기 전에 화면의 구조를 간단하게 설계한 것이다.
색상이나 세부 디자인보다 버튼, 메뉴, 콘텐츠 위치를 먼저 정리한다.
(2) 필요한 이유
와이어프레임을 만들면 화면에 어떤 정보가 들어가야 하는지 미리 확인할 수 있다.
개발 전에 화면 흐름을 점검할 수 있어 불필요한 수정도 줄일 수 있다.
(3) 개발자 관점에서의 의미
와이어프레임은 프론트엔드 구현 전에 화면 구조를 이해하는 데 도움이 된다.
어떤 컴포넌트가 필요한지, 어떤 데이터가 화면에 표시되어야 하는지 미리 파악할 수 있다.
2) CodeMate 와이어프레임 설계 방향
(1) 주요 화면 설계
고객 여정 지도와 사이트맵을 바탕으로 주요 화면 구조를 설계했다.
대시보드, 학습 기록, 에러 기록, 복습 관리, 검색, 마이페이지가 핵심 화면이 된다.
(2) 화면 설계 기준
초보 개발자가 처음 사용해도 헷갈리지 않도록 메뉴를 명확하게 나누는 것이 중요하다고 생각했다.
특히 에러 기록과 학습 기록을 분리하면서도 서로 연결될 수 있도록 설계했다.
(3) 핵심
와이어프레임은 예쁜 화면을 만드는 단계가 아니라, 사용자가 기능을 어떻게 찾고 사용할지 구조를 잡는 단계이다.8 프로토타입
1) 프로토타입의 의미
(1) 프로토타입
프로토타입은 실제 서비스처럼 화면을 클릭하고 이동해볼 수 있도록 만든 시안이다.
완성된 서비스는 아니지만, 사용자 흐름을 미리 체험할 수 있다.
(2) 필요한 이유
프로토타입을 만들면 화면 이동이 자연스러운지, 사용자가 기능을 쉽게 찾을 수 있는지 확인할 수 있다.
개발 전에 문제점을 발견하고 수정할 수 있다는 장점이 있다.
(3) 오늘 제출 내용
오늘은 Figma Make를 활용해 CodeMate 모바일 앱 디자인 프로토타입을 제작하고 링크를 제출했다.
이를 통해 기획 내용을 단순 문서로만 정리하는 것이 아니라 실제 앱 화면 흐름에 가깝게 표현해보았다.9 CodeMate 서비스 기획
1) CodeMate
(1) 서비스 이름
오늘 기획한 앱 이름은 CodeMate이다.
CodeMate는 코딩 공부를 함께 도와주는 친구라는 의미를 담은 이름이다.
(2) 서비스 목적
CodeMate는 초보 개발자가 공부한 개념, 실습 코드, 에러 해결 과정을 한곳에 기록하고 관리할 수 있도록 돕는 모바일 앱이다.
(3) 주요 사용자
주요 사용자는 개발 공부를 시작한 입문자이다.
실습 중 에러를 자주 만나고, 개념 정리와 복습에 어려움을 느끼는 사용자를 대상으로 한다.
(4) 해결하려는 문제
초보 개발자는 에러가 발생했을 때 원인을 바로 파악하기 어렵다.
또한 해결하더라도 기록하지 않으면 같은 문제를 반복해서 검색하게 된다.
CodeMate는 그런 문제를 줄이고, 학습 기록을 복습 가능한 자산으로 만들기 위해 설계했다.
2) 주요 기능
(1) 학습 기록
사용자가 배운 개념과 실습 내용을 기록할 수 있다.
(2) 에러 기록
에러 메시지, 원인, 해결 방법을 기록할 수 있다.
(3) 코드 저장
실습 코드나 중요한 코드 조각을 저장할 수 있다.
(4) 복습 관리
기록한 내용을 다시 복습할 수 있도록 알림과 복습 목록을 제공한다.
(5) 검색
개념, 에러, 코드, 태그를 기준으로 이전 기록을 검색할 수 있다.
(6) 대시보드
학습 현황, 최근 기록, 복습 알림, 진도 통계, 약점 분석을 한눈에 보여준다.10 고객 여정 지도 설계 내용
1) 문제 인식 단계
(1) 행동
사용자는 수업 후 혼자 실습을 진행한다.
실습 중 에러가 발생하면 에러 메시지를 확인하고 인터넷 검색이나 질문을 통해 해결하려고 한다.
(2) 생각
사용자는 왜 에러가 나는지 모르겠다고 느낀다.
같은 에러를 또 만나면 어떻게 해야 할지 걱정한다.
(3) 문제점
에러 원인을 파악하기 어렵다.
해결 방법을 찾아도 금방 잊어버린다.
공부한 내용을 체계적으로 정리하기 힘들다.
(4) 개선 기회
에러 메시지 자동 저장 기능, 자주 발생하는 에러 가이드, 해결 방법 기록 UX가 필요하다.
2) 서비스 탐색 단계
(1) 행동
사용자는 개발 공부 기록 서비스를 검색한다.
여러 서비스를 비교하고 리뷰와 기능을 확인한다.
(2) 생각
사용자는 개념과 에러를 함께 정리하고 싶다고 느낀다.
개발 공부에 특화된 서비스가 필요하다고 생각한다.
(3) 문제점
일반 메모 앱은 개발 공부를 정리하기에 불편하다.
어떤 서비스를 선택해야 할지 고민된다.
(4) 개선 기회
개발 과목별 템플릿, 실습 사용자 후기, 검색 최적화와 기능 비교 페이지를 제공할 수 있다.
3) 가입 및 첫 사용 단계
(1) 행동
사용자는 회원가입을 하고 과목별 카테고리를 만든다.
기본 기능을 둘러본다.
(2) 생각
사용자는 과목별로 정리하니 편하다고 느낄 수 있다.
하지만 처음에는 어떻게 써야 할지 모를 수 있다.
(3) 문제점
처음 사용자가 무엇을 적어야 할지 모른다.
기능이 많아 초반에 복잡하게 느껴질 수 있다.
(4) 개선 기회
온보딩 튜토리얼, 초보자용 작성 예시, 카테고리 추천 기능이 필요하다.
4) 학습 기록 단계
(1) 행동
사용자는 오늘 배운 개념을 정리한다.
실습 코드를 저장하고, 에러와 해결 방법을 기록한다.
(2) 생각
사용자는 나중에 다시 보면 도움이 되겠다고 느낀다.
코드를 함께 저장하니 이해가 잘 된다고 느낀다.
(3) 문제점
기록이 많아지면 찾기 어렵다.
코드와 설명을 따로 관리하면 불편하다.
에러 기록 양식이 없으면 정리하기 힘들다.
(4) 개선 기회
태그, 즐겨찾기, 폴더 기능을 제공할 수 있다.
코드와 설명 동시 저장 UI, 에러 기록 입력 가이드도 필요하다.
5) 복습 및 지속 사용 단계
(1) 행동
사용자는 이전 기록을 검색해 복습한다.
복습 알림을 확인하고 학습 진도와 약점을 확인한다.
(2) 생각
사용자는 전에 정리한 내용을 바로 찾을 수 있어 편하다고 느낀다.
자신의 약한 부분을 확인하고 스스로 문제를 해결할 수 있다고 느낀다.
(3) 문제점
복습할 내용을 직접 기억해야 하면 부담스럽다.
어떤 부분이 약한지 파악하기 어렵다.
꾸준히 사용하지 않으면 기록이 쌓이지 않는다.
(4) 개선 기회
복습 알림과 스페이스드 리피티션을 적용할 수 있다.
학습 진도 대시보드, 약점 분석, 성취감 요소를 제공하면 지속 사용에 도움이 된다.11 사이트맵 설계 내용
1) 전체 메뉴 구조
(1) 홈
홈은 전체 서비스의 시작 지점이다.
사용자는 홈에서 대시보드, 과목 관리, 학습 기록, 에러 기록, 복습 관리, 검색, 마이페이지로 이동할 수 있다.
(2) 대시보드
대시보드는 사용자의 학습 상태를 요약해서 보여준다.
학습 현황 요약, 최근 학습 기록, 복습 알림, 진도 통계, 약점 분석 요약 기능이 포함된다.
(3) 과목 관리
과목 관리는 학습 내용을 과목별로 분류하기 위한 메뉴이다.
과목 목록, 과목 추가, 과목별 설정, 카테고리와 태그 관리 기능이 있다.
(4) 학습 기록
학습 기록은 개념 정리와 실습 기록으로 나뉜다.
개념 목록, 개념 작성, 개념 상세 보기와 실습 목록, 실습 작성, 코드 저장, 파일 첨부, 실습 상세 보기 기능을 포함한다.
(5) 에러 기록
에러 기록은 개발자가 실습 중 만난 문제를 정리하는 메뉴이다.
에러 목록, 에러 작성, 에러 상세 보기, 해결 방법 정리, 관련 실습과 개념 연결 기능을 제공한다.
(6) 복습 관리
복습 관리는 기록한 내용을 다시 학습하도록 돕는 메뉴이다.
복습 목록, 복습 계획 설정, 복습 알림 설정, 복습 진행, 복습 완료 기록 기능이 있다.
(7) 검색
검색은 쌓인 기록을 빠르게 찾기 위한 메뉴이다.
통합 검색, 개념 검색, 에러 검색, 코드 검색, 태그 검색 기능이 포함된다.
(8) 마이페이지
마이페이지는 개인 설정을 관리하는 메뉴이다.
프로필 관리, 학습 목표 설정, 알림 설정, 데이터 백업과 내보내기, 로그아웃 기능을 제공한다.
2) 사이트맵 설계 핵심
(1) 고객 여정과 연결
사이트맵은 고객 여정 단계와 연결되도록 설계했다.
문제 인식 단계에서는 홈과 대시보드, 서비스 탐색 단계에서는 기능 소개, 가입 및 첫 사용 단계에서는 과목 관리와 마이페이지가 연결된다.
학습 기록 단계에서는 학습 기록과 에러 기록, 복습 단계에서는 복습 관리와 검색이 중심이 된다.
(2) 기능 분류
기능을 단순히 많이 넣는 것이 아니라 사용자의 흐름에 맞게 분류했다.
학습을 시작하고, 기록하고, 다시 찾고, 복습하는 흐름이 자연스럽게 이어지도록 구성했다.
(3) 설계 핵심 포인트
초보 개발자의 학습 흐름인 문제 인식, 탐색, 사용, 기록, 복습에 맞춰 메뉴 구조를 구성했다.
학습 기록과 에러 기록을 중심 기능으로 배치하고, 복습과 검색 기능을 강화했다.
대시보드에서 학습 현황을 한눈에 파악할 수 있도록 설계했다.12 Figma 프로토타입 제작 및 제출
1) Figma Make 활용
(1) Figma Make
오늘은 Figma Make를 활용해 CodeMate 모바일 앱 디자인을 제작했다.
텍스트로 서비스의 목적과 화면 구성을 입력하고, 이를 바탕으로 모바일 앱 화면을 생성했다.
(2) 모바일 앱 디자인
CodeMate는 모바일 앱 형태로 설계했다.
초보 개발자가 수업 중이나 실습 중에도 빠르게 기록하고 다시 찾아볼 수 있도록 모바일 접근성을 고려했다.
(3) 프로토타입 제출
최종적으로 Figma 프로토타입 링크를 제출했다.
제출 링크:
https://www.figma.com/make/Nky04gDXffrrrjs8T3gaks/CodeMate-Mobile-App-Design?code-node-id=0-9&p=f&t=OKhu83fVdf9OX1nS-0&fullscreen=1
2) 프로토타입 제작의 의미
(1) 기획을 화면으로 구체화
고객 여정 지도와 사이트맵은 사용자의 흐름과 기능 구조를 정리하는 단계이다.
프로토타입은 이 구조를 실제 화면처럼 볼 수 있게 만드는 단계이다.
(2) 사용자 흐름 확인
프로토타입을 통해 사용자가 홈에서 대시보드, 학습 기록, 에러 기록, 복습 관리로 이동하는 흐름을 확인할 수 있다.
화면 간 연결이 자연스러운지 점검할 수 있다는 점에서 의미가 있었다.
(3) 개발 전 검증
프로토타입을 먼저 만들면 실제 개발 전에 화면 구조와 기능 흐름을 검토할 수 있다.
개발 후 수정하는 것보다 기획 단계에서 문제를 발견하고 수정하는 것이 훨씬 효율적이다.13 오늘 학습한 핵심 정리
1) 페르소나
(1) 페르소나는 대표 사용자를 구체화하는 과정이다.
(2) 사용자의 상황, 목표, 문제점을 정리해 서비스 방향을 잡는다.
(3) 오늘은 에러 앞에서 멈추는 초보 개발자 현우를 페르소나로 설정했다.
2) 고객 여정 지도
(1) 고객 여정 지도는 사용자가 서비스를 이용하는 전체 과정을 단계별로 정리한 것이다.
(2) 행동, 생각, 접점, 문제점, 개선 기회를 함께 정리한다.
(3) 사용자가 어느 지점에서 불편을 느끼는지 파악할 수 있다.
3) 사이트맵
(1) 사이트맵은 서비스의 전체 메뉴 구조를 정리한 것이다.
(2) 사용자가 어떤 메뉴를 통해 어떤 기능으로 이동하는지 보여준다.
(3) 개발 관점에서는 페이지 구조와 기능 구조를 잡는 데 도움이 된다.
4) 와이어프레임
(1) 와이어프레임은 화면의 기본 구조를 설계하는 단계이다.
(2) 색상이나 디자인보다 메뉴, 버튼, 콘텐츠 배치를 먼저 정리한다.
(3) 개발 전에 화면 흐름과 필요한 기능을 확인할 수 있다.
5) 프로토타입
(1) 프로토타입은 실제 서비스처럼 화면 이동을 체험할 수 있는 시안이다.
(2) 개발 전에 사용 흐름을 검증할 수 있다.
(3) 오늘은 Figma Make를 활용해 CodeMate 모바일 앱 프로토타입 링크를 제출했다.
6) CodeMate
(1) CodeMate는 초보 개발자를 위한 학습 관리 앱이다.
(2) 개념 정리, 실습 코드, 에러 기록, 복습 관리를 핵심 기능으로 설계했다.
(3) 사용자가 같은 에러를 반복해서 검색하지 않고, 자신의 기록을 학습 자산으로 만들 수 있도록 기획했다.
7) 오늘 배운 점
(1) UI/UX는 디자인만의 문제가 아니다
오늘 특강을 통해 UI/UX는 단순히 화면을 예쁘게 만드는 것이 아니라 사용자의 문제를 해결하는 과정이라는 것을 알게 되었다.
(2) 개발 전 사용자 이해가 중요하다
기능을 만들기 전에 사용자가 어떤 상황에서 어떤 문제를 겪는지 먼저 파악해야 한다.
페르소나와 고객 여정 지도는 그 과정을 도와주는 도구이다.
(3) 사이트맵은 개발 구조와도 연결된다
사이트맵을 만들면서 메뉴 구조가 곧 페이지 구조와 기능 구조로 이어질 수 있다는 것을 알게 되었다.
이는 나중에 실제 웹 개발을 할 때 Controller, URL, View 설계와도 연결될 수 있다.
(4) 초보 개발자 서비스의 핵심은 기록과 복습이다
초보 개발자는 에러를 해결해도 다시 잊어버리기 쉽다.
그래서 단순 기록 기능뿐만 아니라 검색, 복습 알림, 대시보드, 약점 분석 기능이 중요하다고 생각했다.
(5) Figma 프로토타입을 통해 기획이 더 구체화되었다
처음에는 막연히 개발 공부를 도와주는 서비스라고 생각했지만, 페르소나, 고객 여정 지도, 사이트맵, 와이어프레임을 거치면서 필요한 기능과 화면 구조가 구체화되었다.
마지막으로 Figma Make를 활용해 CodeMate 모바일 앱 프로토타입을 만들고 제출하면서 아이디어가 실제 서비스 화면 흐름으로 이어지는 과정을 경험할 수 있었다.'멀티캠퍼스' 카테고리의 다른 글
| [2026.07.06] - TIL 66일차 (Spring Boot 게시판 보완과 Thymeleaf 시작) (0) | 2026.07.07 |
|---|---|
| [2026.06.25 ~ 2026.06.26] - TIL 59~60일차 MSA 특강 정리 (0) | 2026.06.30 |
| [2026.06.23] - TIL 57일차(Spring MVC03 게시판 프로젝트 완성) (0) | 2026.06.25 |
| [2026.06.22] - TIL 56일차 Spring MVC 기본 구조 정리 (1) | 2026.06.25 |
| [2026.06.19] - TIL 55일차 Spring AOP 실습 정리 (0) | 2026.06.25 |