본문 바로가기

모카 스터디

Next.js 오리엔테이션 및 강의 수강 필요사항 정리 패스트캠퍼스의 next.js 강의를 토대로 기록을 하며 공부 https://fastcampus.co.kr/dev_online_nextjs Next.js 완전 정복 : 확장성 높은 커머스 서비스 구축하기 | 패스트캠퍼스 확장성 높은 커머스 서비스를 구축하며 30가지 이상의 기능을 익히는 Next.js 딥다이브 강의! 토스증권 프론트엔드 리드 강사님께 배우고, 실무 노하우와 프론트엔드 개발자 취업&이직 꿀팁까지 fastcampus.co.kr next12.1.6 버전으로 강의 진행 create next-app 으로 만든 프로젝트의 버전이 13으로 업데이트되어 혼란을 느낄 수 있어 깃허브 코드를 보며 학습. 12 버전과 13 버전의 차이점은 next/image 와 next/link 의 사용방식 관련링크 crea.. 더보기
개발자에게 전달하는 핸드오프 피그마로 핸드오프 링크 만들기 핸드오프 전용 페이지 제작 개발자가 봐야하는 레이어들만 따로 저장 Zeplin으로 핸드오프 링크 제작하기 zeplin.io 접속 후 무료 계정 으로 회원가입 및 로그인 다시 피그마로 가서 community에서 zeplin 플러그인 다운 connect zeplin account 를 누르면 오른쪽과 같은 문구와 함께 새로운 브라우저가 열린다. zeplin으로 export zeplin 앱 다운로드 처음 open zeplin 을 클릭하면 프로젝트가 없다고 나오므로 프로젝트를 생성한다. 그리고 다시 프레임을 선택하고 export를 해주면 만든 zeplin 프로젝트에서 확인이 가능하다. 피그마의 핸드오프와 달리 zeplin에서 아이콘을 사용하기 위해서는 피그마에서 선작업이 필요하다. .. 더보기
피그마 프로토타이핑 적용하기 프로토타이밍의 목적 1. 사용자 테스트시 활용 2. 팀원들과 커뮤니케이션을 위해 위와 같은 과정으로 프로토타입 타이핑이 완성된 것을 지인에게 링크로 공유할 수 있ㄷ다. 적용하기 프로토타입 탭을 선택 후 시작 프레임 선택 위와 같은 과정으로 어디로 연결시켜 줄지 설정 더보기
종합 실전 예제 3. 이커머스 앱 UI 디자인 오픈소스 템플릿을 활용한 UI 디자인 기초 작업 아이폰 11 기준 프레임 설정 community에 ios ui kit 또는 android ui kit 또는 web design ui kit으로 검색 필요한 컴포넌트를 복사 붙여넣기로 가져온다. 기본 아이콘은 Father Icons 라는 플러그인 사용 Alt 키를 눌러 가운데 정렬을 편하게 한다. 위와 같은 방식으로 중간 점검 가능 홈화면으로 시안 작업하기 기본적으로 대표 프레임을 하나 선택한 후 완성하고 다른 프레임 화면들을 구성 백그라운드 컬러를 약간 아주 약간 회색으로 두고 탭bar를 완전 흰색 으로 입력폼에 그림자를 입히면 가시성이 좋다. 텍스트와 도형을 그룹화 하려면 cmd+ g 디자인 시스템 만들기 제품 상세 페이지 디자인 상단 인디케이터 위치 고.. 더보기
디자인 시스템을 만드는 이유 그리고 Component UI Component에 대한 개념, 그리고 Figma의 Component 기능을 사용하는 이유 Figma의 Component 기능 마스터하기 컴포넌트를 등록하기 위해서는 그 오브젝트가 하나의 레이어여야 한다. 에셋에서 컴포넌트가 잘 등록 되었는지 확인(드래그 앤 드롭으로 인스턴스로 사용가능) 본체로서의 컴포넌트로 잘 등록 되었는지 확인(다이아몬드 모양) 본체 컴포넌트 변경하는법 본체로부터 인스턴스 분리하는법(커스텀 마이징을 위해) 컴포넌트들이 많을때 정리하는법 / 사용해서 폴더식으로 정리 하기 그럼 아래와 같이 폴더 처럼 정리가 된다. 위와 같은 방식으로 컴포넌트를 폴더로 저장하놓은 것들 토대로 다른 컴포넌트로 변경 가능 라이브러리와 팀 라이브러리 기능 이전 시간 등록한 컴포넌트들은 파일 내에서 등록된.. 더보기
디자인 시스템을 만드는 이유, 그리고 Style[텍스트, 컬러, 이펙트, 그리드] Good에서는 일관적인 텍스트 사이즈를 가지고 있으며 버튼의 크기 또한 일관적인 사이즈를 가지고 있다. 스타일 기능 1. 텍스트, 컬러 왼쪽과 같이 앞으로 쓸 텍스트의 규격을 적어 놓고 가운데와 같이 추가 하여 오른쪽과 같이 다른 텍스트를 쓸경우 (아래와 같이)다시 그 규격에 맞게 사용할 수 있다. 위와 같은 과정으로 이전에 만들어 놓은 규격들이 적용된 모든 텍스트 들 또한 변경할 수 있다. 색깔도 텍스트와 같이 자주 사용하는 색을 저장 가능 위와 같이 지정한 컬러들 적용 가능 스타일 기능 2. 이펙트, 그리드 이전에 배운 drop-shadow 또한 저장이 가능. 그리드도 저장 가능 위와 같이 적용 더보기
Constraint +Auto Layout Constraint Constraint : 오브젝트에 제한을 둬서 여러 상황에 유연하게 대처하게 한다. 프레임 위에 오브젝트를 만들면 각 축을 어디에 둘지 설정할 수 있다. 왼쪽(오른쪽)으로 프레임을 늘려도 constrain에서 설정한 축을 기준으로 오브젝트가 위치한다. constrain 사용 예시 비율에 맞게 프레임의 사이즈를 조절함에 따라 오브젝트의 크기도 변경 프로토 타이핑시 유용한 Fixed Position Auto Layout 해당 오브젝트에 어떤 텍스트가 들어가던지 padding 등 간격을 유지하도록 하려한다. 텍스트와 오브젝트를 클릭 후 auto layout 버튼 클릭 각 오브젝트간의 간격또한 auto layout 적용 가능 왼쪽과 달리 오른쪽은 텍스트를 다르게 입력을 해도 오브젝트간의 간격.. 더보기
그리드 그리드를 사용하는 이유 1. 정돈된 디자인 2. Responsive 디자인 3. 개발자와의 원활한 커뮤니케이션 그리드 핵심 용어 Max Width, Container, Gutter,Column Width, Column Count, Offset 그리드 만들기 눈 모양 버튼을 누르거나 ctrl+ G 누르면 그리드 없이 UI만 볼 수 있다. 그리드를 활용해서 오브젝트 배치해보기 주 컨텐츠와 부 컨텐츠를 나누며 그룹으로 나눈 예시 그리드를 활용한 반응형 UI 디자인 만들어 보기 모바일 버전으로 다시 바꿀떄 Crop으로 되어 있으면 이미지 사이즈를 조절하면 찌그러지기 때문에 Fill로 바꾼 뒤 사이즈를 조정 해야한다. 더보기

티스토리툴바