전체 글 (72) 썸네일형 리스트형 [인생네컷] 어플 화면 분석 로그인 온보딩 -시그널, 프레임선택, 다운로드, 스토리 기능 - 프레임 선택 기능 위주로 홍보하던데, 어플 이용 결과 시그널 및 스토리 기능이 강점이었음. 메인 페이지 - 메인 페이지 캐러셀은 최근 추가된 이벤트 및 프레임부터 출력되는 것으로 추청 - 때문에 기존에 진행하고 있는 매일 출석 이벤트 캐러셀이 캐러셀 중간에 위치하여 노출도 저조한 상황 (공지사항을 읽고 출석 이벤트가 있었다는 걸 알게 되었음) - 매일출석 이벤트를 캐러셀 1로 고정하여 노출도 상승 및 리텐션률 개선 가능 프레임 선택 프레임 이름/ 설명/ 태그/ 유형/컷수/ 댓글보기 기능 - 프레임 태그는 클릭하여 검색 불가함 - 댓글보기의 경우 토글로 구현 - 토글은 on/off 모두 회색 배경에 분홍색 원형으로 출력 - 프레임에도 댓글을 .. [인생네컷] 어플 약관 분석 약관 및 권한 동의 약관 및 권한 동의 페이지 1. UX라이팅 문구 각 항목에 동의하여 새로운 추억을 남겨보세요:) 2. 띄어쓰기 수정 필요 "필수 약관 및 권한의 전체 동의가 반드시필요합니다." 3. 띄어쓰기 필수 권한 동의 (필수)> 저장공간의 박스 윗 부분 간격이 너무 좁다 서비스 이용 약관 제2조(정의) 1. "서비스"라 함은 "매장"에서 촬영한 사진 및 동영상 관리를 위한 제반 서비스 등 "당사"가 "회원"에게 제공하는 서비스를 통칭하여 말합니다. 2. "매장"이라 함은 당사"가 직영으로 운영하는 모든 인생네컷 매장과 "당사"와 계약하여 인생네컷 브랜드를 이용하는 국/내외 모든 가맹점(일부매장 제외)을 말합니다. 3. "회원"이라 함은 "서비스"에 회원등록을 한 자로서, 계속적으로 "서비스"이 .. 피그마 기본 툴 정리 #2. 프레임과 도형의 차이점 피그마 상단바에는 프레임 툴과 도형 틀이 있다. 좌측처럼 프레임 기능을 이용해서 사각형을 그릴 수도 있고 우측처럼 도형 기능을 이용해서 사각형을 그릴 수 있다. 맨 처음에는 "프레임으로 그리나 도형으로 그리나 똑같은 거 아니야?" 라고 생각했지만 두 기능은 완전 다르다..!! 원을 하나 그린 다음에 프레임과 사각형에 각각 넣어보면 그 차이점을 알 수 있다. 프레임 프레임의 경우 원을 선택한 후에 프레임 안쪽에 넣으면 프레임 테두리가 파란색으로 활성화가 되면서 프레임 속으로 도형을 넣을 수 있다. 그러면 프레임을 이동시키면 해당 도형도 프레임과 함께 이동한다. 좌측에서도 프레임 안에 원형이 들어가 있는 걸 확인할 수 있다. 사각형 일반 사각형의 경우는 사각형을 이동시키면 사각형만 이동하고 안쪽에 위치한 원.. 피그마 핵심기능 02: 프로퍼티 - 프로퍼티는 컴포넌트와 함께 사용하는 기능이므르 컴포넌트 게시글을 먼저 읽는 것을 추천 https://ericaforcoding.tistory.com/5 피그마 핵심기능 01: 컴포넌트 컴포넌트 컴포넌트를 사용해 반복적으로 사용되는 요소를 제작하면 한 번의 수정으로 전체에 반영할 수 있음 작업 시간 단축 일관성 있는 디자인 스타일 유지 마스터 컴포넌트와 인스턴트 컴포 ericaforcoding.tistory.com 프로퍼티 - 컴포넌트를 수정하기 쉽게 미리 셋팅해둘 수 있는 것 - 해당 셋팅값을 패널에 빼두고, 패널에서 프로퍼티만 수정 가능 - 프로퍼티를 설정하면 cmd+클릭으로 접근할 필요 없이 바로 패널에서 수정할 수 있다! - 3종류의 프로퍼티가 존재(텍스트/인스턴스 스왑/불린 프로퍼티) 1. 텍.. 피그마 핵심기능 01: 컴포넌트 컴포넌트 컴포넌트를 사용해 반복적으로 사용되는 요소를 제작하면 한 번의 수정으로 전체에 반영할 수 있음 작업 시간 단축 일관성 있는 디자인 스타일 유지 마스터 컴포넌트와 인스턴트 컴포넌트로 구성 마스터 컴포넌트 최초로 형성된 컴포넌트 모든 인스턴스의 마스터 유지, 보수 시에만 수정 마스터 컴포넌트 수정 시 인스턴트 컴포넌트에도 똑같이 적용됨 인스턴트 컴포넌트 마스터 컴포넌트의 사본 인스턴스 컴포넌트 수정 시 마스터 컴포넌트에 적용되지 않음 컴포넌트 만들기 마스터 컴포넌트 만들기 - 컴포넌트로 만들 대상 선택 후 상단 바에 다이아몬드 버튼 클릭 - 단축키: cmd+opt+k - 컴포넌트 생성 시 테두리 보라색으로 변경 - 좌측 레이어 탭에서도 확인 가능 인스턴스 컴포넌트 만들기 - 마스터 컴포넌트 복사 시.. 피그마 기본 툴 정리 #1. Move와 Scale의 차이점 피그마 기본 툴 정리 #1. Move와 Scale Move와 Scale 피그마 상단 툴에서 가장 첫번째에 위치한 Move! Move만 있는 줄 알았는데, 눌러보니까 Scale이라는 기능도 있었다 ㅎㅎ 두 기능을 간략하게 설명하자면 다음과 같다. Move: 가장 기본 상태 / 요소를 선택하거나 옮길 때 사용 무브툴로 확대, 축소 시 기존 아웃라인 두께가 유지됨 Scale: 선의 굵기, 비율을 일정하게 유지한 채 크기를 키울 때 사용 비교적 최근 추가된 기능 스케일툴의 경우 아웃라인 두께가 도형의 비율을 유지한 채로 커진다 다양한 사이즈의 아이콘을 만들 때 대응 가능 Move VS. Scale 예시 - 좌, 우 모두 6x6 사각형, stroke 1 - 좌측 사각형은 move로 12x12로 확대 - 우측 사각.. 피그마 기본 툴 정리 0.개요 피그마 기본 툴 정리 1. Move, Scale move: 가장 기본 상태 / 요소를 선택하거나 옮길 때 사용 Scale: 선의 굵기, 비율을 일정하게 유지한 채 크기를 키울 때 사용 2. Frame, Section, Slice Frame: 캔버스 / 프레임 안에 그려진 요소들을 프레임에 포함된 Section: 영역을 만들어 요소를 구분 지을 수 있음 Slice: 특정 영역을 지정해 이미지로 추출할 수 있음 3. 도형 Rectangle~Star: 해당하는 도형을 그릴 수 있음 Place image/video: 이미지, 영상 삽입 가능 피그마의 장점 10월에 해커톤을 나가면서 처음으로 만져보게 된 피그마! 해커톤을 하면서 피그마를 공부할 수 있을 줄 알았는데 국비 수업과 해커톤을 병행하면서 따로 피그마를 공부하는 시간을 내기에는 힘들었다. 결국 컴포넌트, 오토 레이아웃 등 피그마의 기본적인 요소들을 전혀 모른 채로 해커톤 일정에 맞춰서 제출용 와이어프레임을 그리는 데에 집중할 수밖에 없었다. 피그마를 한 번쯤 기초부터 배워보고 싶었는데 좋은 기회로 피그마를 배울 수 있게 되어서 잊지 않도록 블로그에 기록해두기로! 1. 피그마란? 웹 기반의 클라우드 소프트웨어 별도의 설치 없이 사용 가능 운영체제의 호환성에도 영향을 받지 않음 윈도우, 맥, 리눅스 모두 사용 가능 데스크탑 앱 및 모바일 앱 제공 2. 피그마의 장점 URL 전달로 파일 공유 가능 기존 .. 이전 1 ··· 6 7 8 9 다음
