studio.heelab

마지막 스터디 활동은 앱 구현하기입니다. 2024.06.12.수 커뮤니티 웹사이트를 구현하여 운영했던 경험을 토대로 커뮤니티 앱을 구현하기로 정했습니다. 이 앱은 계정을 만들면 전 세계 사람들에게 일상이 공유되는 기존 SNS와 다르게 자신이 속해 있는 단체에서만 자신의 일상이나 단체에서의 활동을 외부인이 보지 못하게 하여 마음 편히 SNS 활동을 할 수 있도록 하기 위해 기획했습니다. 또한, 여러 단체에서 가입되어 있다면 동시에 사용이 가능합니다. 앱 화면 구성을 총 5가지(홈 화면, 검색하기 화면, 채팅 화면, 프로필 화면, 알림 화면)로 분류해보았습니다. 1.홈 화면나와 사용자들이 공유한 게시물 시간 순으로 확인 가능(인스타, 예율엑소 참고)상단바: 로고, 알림창증간바: 게시글하단바: 홈버튼, 검색버..

3주차입니다. 이번 주 공부할 파트는 Part 7. 피그마 활용 팁 익히기 입니다. Part 7. 피그마 활용 팁 익히기 01) 섹션(Section) 1. 섹션 생성하기 툴 바의 섹션 도구 or Shift+S 누른 다음 드래그 2.유저 플로우별로 캔버스 영역 구분하기 섹션으로 유저 플로우별로 프레임 묶고 장업 영역 구분 가능 3. 개발 준비 완료 상태 표시하기 프레임 섹션 안 이동 후, 해당 아이콘 클릭 개발 완료 상태는 초록색 라벨, 라벨 클릭해 Dev Mode에서 해당 섹션 확인 or 'Remove ready status' 선택해 이전 상태로 되돌릴 수 있음 4. 컴포넌트 에셋 그룹화하기 메인 컴포넌트 그룹화하는 용도로 활용하기도 함. 섹션 이름을 통해 인스턴스 컴포넌트 그룹화됨 5. 섹션 삭제하기 ..

UI/UX 2주차입니다. 커리큘럼 일정이 빠듯해서 벌써 Part 4에 들어왔습니다. 다른 할 일들에 밀려 미루고 있던 기술블로그의 마감일이 오늘입니다. 오늘 밤안에 161p의 진도를 다 끝내는 기적을 보여드리겠습니다^^ (지현아 기다려라 언니가 간다) Part 4. 오토 레이아웃 01) 오토 레이아웃 구성 요소 1. 오토 레이아웃 생성하기 레이아웃 생성방법: 오브젝트 선택 후 단축키 Shift+A, 프레임 선택 후 Auto layout 패널의 + 아이콘 클릭 *단축키 Ctrl+D: 복제하기 2. 방향 따라 오브젝트 배열하기 Auto layout 패널의 아래 화살표: 수직방향, ->:수평방향, 감기화살표: 줄바꿈(수평방향으로만 적용) 3. 간격 설정하기 Auto layout 패널의 막대기 3개모양 아이콘으..

오랜만에 기술블로그를 다시 써보네요! 너무 떨립니다. 그동안 배워보고 싶었던 UI/UX 디자인을 "ECC UI/UX 스터디1팀"에 들어와 공부하게 되었습니다. 교재는 [실전 피그마: UI/UX 디자이너, 서비스 기획자를 위한 실무 입문서] 입니다. 1주차 진도는 part1, part2, part3 입니다. Part1 피그마 미리보기 01) 협업을 위한 최고의 올인원 디자인 플랫폼 1. 뛰어난 호환성과 접근성 2. 실시간 협업기능 3. 벡터 기반 디자인 4. 강력한 편의 기능 5. 디자인 시스템 6. 다양한 플러그인 생태계 7. 자동 히스토리 저장 02)생산성을 높이는 피그마 커뮤니티 피그마 사이트에서 커뮤니티 화면을 찾을 수 없어서 구글에서 피그마 커뮤니티 검색 후 접근할 수 있었다. 피그마 커뮤니티의 ..