전체 글 (72) 썸네일형 리스트형 [새싹X러닝스푼즈 서비스기획 1기] Project 9주차 프로젝트 최종 회고 일본인 타깃 K-POP 큐레이션 여행 서비스 프로젝트 소개 일본인 타깃 K-POP 큐레이션 여행 서비스 프로젝트 기간 및 인원 프로젝트 기간 2023-03-06~ 2023-05-10 (약 2개월) 프로젝트 인원 서비스 기획자: 3명 주요 기능 선택한 최애 정보 기반 덕질 스팟 정보 제공 스트리트뷰(로드뷰) 기능 일본어 방청 신청 가이드 활용 툴 기획: Notion, Google Sheet 디자인: Figma, 망고보드 데이터: GTM, GA4, Google Looker Studio 노코드툴: Notion, 우피 프로젝트 관리 Notion으로 프로젝트 일정관리 및 문서화 진행 프로젝트 방법론 Agile Scrum : 매일 데일리 스크럼 진행 프로젝트 산출물 프로토타이핑 시연 동영상 https://youtu.. [새싹X러닝스푼즈 서비스기획 1기] Project 8주차 프로토타입 완성, 스토리 보드 제작, 최종 IA 프로토타이핑 (Prototyping) 지난주에 작성한 와이어프레임을 기준으로 프로토타입을 제작했다. 프로토타이핑 세부 이미지 삽입 1. 생일카페, 지하철 전광판 관련 최애 멤버의 생일 카페, 지하철 전광판 카드는 피그마 플러그인 Google Sheets Sync를 사용하여 사전에 수집한 이미지와 텍스트 정보를 연동하여 제작하였다. 플러그인을 통하여 내용을 추가할 영역의 디자인을 구성하는 레이어들의 이름을 #레이어이름 으로 지정하고, 스프레드 시트의 첫 열에 항목을 레이어이름과 똑같이 작성하면(# 제외!) 동기화가 가능하다. 사용 플러그인 (Google Sheets Sync): https://www.figma.com/community/plugin/735770583268406934 Google Sheets .. 피그마 프로토타이핑 가로 스크롤 안 될 때 해결법(For scrolling to work on this frame, the content needs to be bigger than the frame.) 프로토타이핑 가로 스크롤 에러 메시지 피그마로 프로토타이핑 작업 중에 만난 오류! scroll behavior에서 Overflow- Horizontal이 되어야 하는데, 느낌표와 함께 가로 스크롤 기능이 구현되지가 않았다. 마우스를 호버하면 다음과 같은 안내 문구가 뜬다. For scrolling to work on this frame, the content needs to be bigger than the frame. 이 문구가 핵심이다! 콘텐츠가 프레임보다 커야 overflow를 시킬 수 있는데, 콘텐츠가 프레임보다 작거나 크다면 overflow를 할 수가 없다. 피그마 가로스크롤 해결 방법 내가 가로스크롤 효과를 줄 컴포넌트! 하단 3개의 카드에 가로스크롤 효과를 주려고 한다. 여기서 꿀팁! 나의 .. 어플 콘텍스트 메뉴에는 어떤 기능을 넣을 수 있을까? 어플을 꾸욱- 누르면 '콘텍스트 메뉴'가 뜬다. 내 휴대폰에 설치된 어플들을 다 꾸욱 눌러봤는데, 콘텍스트 메뉴를 보고 공부할 거리가 있을 것 같아서 기록해둔다! 금융 신한 SOL의 경우 고객지원/컨 반환/계좌조회/이체 기능이 출력된다. 고객지원을 콘텍스트의 첫번째 메뉴에 배치한 것이 역시 금융권이라는 생각이 들었다. 특이했던 점은 '컵 반환'이 컨텍스트 두번째 메뉴에 위치했다는 점! 실제로 '컵 반환'은 신한 SOL 메인 페이지에 커다랗게 배치된 기능이기도 하고, 이렇게 콘텍스트 메뉴에 두 번째 위치한 것을 보니 신한 SOL이 내부적으로도 중요시 여기는 기능이라는 것을 알 수 있었다. 메신저 메신저 어플의 경우 카카오톡/텔레그램은 콘텍스트 메뉴가 구성되어 있었고, 디스코드의 경우 별도의 콘텍스트 메뉴가.. [새싹X러닝스푼즈 서비스기획 1기] Project 7주차 와이어프레임 제작 목차 1. 와이어프레임 2. 이번주 요약 3. 다음주 계획 이번주는 저번주에 작성한 IA를 기반으로 와이어프레임을 작성했다. 1. 와이어프레임 1. 협업을 위한 스타일 가이드 정하기 와이어프레임을 시작하기에 앞서서 가장 먼저 신경썼던 것은 스타일 가이드였다. 단독으로 작업하는 프로젝트가 아니라 3명이서 진행하는 팀 프로젝트인 만큼, 스타일 가이드와 네이밍 컨벤션이 명확하게 잡혀져야 추후 작업이 빨라질 것이라는 판단이었다. 멘토님과 디자이너 분 역시 스타일 가이드를 먼저 정하라는 조언을 주셔서 스타일 가이드를 잡는 것을 최우선 순위로 작업하였다. 전체적인 스타일 가이드의 경우 피그마 커뮤니티에 있는 Material 3 Design Kit을 사용하여 작업하였다. Figma Created with Figma .. [피그마 플러그인 추천] ABLE- friction free accessibility 피그마의 장점이라면 무엇보다도 다양한 플러그인을 제공한다는 점이다. 그 중에서도 유용한 플러그인을 발견해서 블로그에 소개하고자 한다. ABLE - friction free accessibility 해당 플러그인을 chatGPT에 물어보니, 이런 답변을 얻을 수 있었다. ABLE - friction free accessibility는 웹사이트나 앱 등 디지털 콘텐츠의 접근성을 높이기 위한 디자인 철학입니다. 이 디자인 철학은 모든 사용자가 쉽게 접근할 수 있는 사용자 경험을 제공하고, 장애를 가진 사람들이 제한 없이 정보와 기능을 이용할 수 있도록 합니다. Accessible: 모든 사용자가 쉽게 접근할 수 있는 디자인 Beautiful: 아름다운 디자인 Logical: 직관적이고 논리적인 디자인 Effi.. [새싹X러닝스푼즈 서비스기획 1기] Project 6주차: 설문조사, MVP,IDI 기반 기능 도출 및 IA 설계 목차 1. 설문조사 결과 분석 2. MVP 결과 분석 3. IDI 결과 분석 4. 최종 기능 도출 5. IA 설계 설문조사 결과 분석 설문조사 기간: 2023.03.16~2023.04.09 총 입력자 수: 30명 설문조사 결과 1. K-pop 관련 정보 수집 채널 인스타그램 > 트위터 > 유튜브 > 팬커뮤니티 > 틱톡 순으로 이용 K-pop 팬들은 K-POP 관련 정보 수집 시 평균 3.6개의 채널 사용 2. 한국관광 시 경험한 K-pop 관련 장소 가장 방문하고 싶었던 장소와 실제로 방문했던 장소 순위는 지하철 전광판 > 사옥 > 생일 카페 > 최애가 언급한 식당/카페으로 동일. 3. K-pop 관련 여행 시 불편한 점 '교통 문제'가 가장 큰 요소를 차지하고 있었음 4. 설문조사 기반 IDI 추가 질.. 피그마 마스크 기능으로 도형에 맞춰 그림 자르기 포트폴리오를 만들던 중, 동일한 위치에 있는 부분들만 크롭해야 하는 일이 생겼다. 이 3개의 사진에서, 내가 원하는 부분은 상단의 "연,월, 러닝 횟수, km" 부분이었다. 처음엔 별 생각없이 그냥 아이폰에서 이미지를 편집했더니, 크기가 다 제각각이라서 깔끔한 느낌이 들지 않았다. 혹시 피그마로 한 번에 해결할 수 없을까? 하고 알아보니 가능하길래!! ㅎㅎ 바로 블로그에 기록 남겨본다! 피그마 마스크 기능으로 도형에 맞춰 그림 자르기 일단 이렇게 피그마에 내가 자르고 싶은 사진들을 나열해준다. 그 다음 사진들을 전부 프레임에 넣어준다. 나의 경우는 Shift+A로 오토레이아웃으로 프레임 처리를 해주었다. 프레임에 넣어주는 이유? 복수의 사진들에 동일한 크기의 사각형을 동일한 위치에 넣어주기 위함이다! F.. 이전 1 2 3 4 5 ··· 9 다음
