피그마로 반응형
position 설정
오른쪽 디자인창에서 position => constraints 에서
L은 왼쪽에 고정,R은 오른쪽에 고정,Center는 중앙에 고정
L+R할 경우 페이지가 늘어나면 width 증가
T+B 하면 페이지가 늘어나면 hegiht 증가
오토레이아웃
alt+드래그 => 복사
shift+A 프레임으로 합치기
ctrl+D 옆으로 복사
resize to fit 누르면
패딩에 맞게 frame이 줄어듬
요소에 의해 반응형 ex)버튼 => Dimensions hug content
버튼안에 버튼보다 큰 요소 넣기 ctrl 누르고 넣기
move 상태면 키누르고 하면 프레임만 줄어들고
scale 상태에서 프레임 줄이면 안에 요소도 같이 줄어듬
컴포넌트 => 메인 컴포넌트는 4개 다이아 그냥은 큰 다이아 1개
clip content 체크 시 프레임의 길이가 요소보다 작으면
요소가 안보여짐
Direction + gap의 3번째 하면
inline-block 형태의 프레임의 길이가 요소 늘어진 길이보다 작으면
다음칸으로 요소가 배치됨
그룹,프레임,컴포넌트
프레임(Frame)
프레임은 레이아웃을 구성하는 가장 기본적인 단위이다.
프레임 안에 다른 레이어들을 넣을 수 있다.
프레임에는 고유의 좌표계가 있어 안에 있는 레이어들의 위치가 프레임을 기준으로 정해진다.
프레임의 크기를 조절하면 안에 있는 레이어들의 위치와 크기도 자동으로 조절된다.
프레임은 반응형 디자인을 위한 여러 가지 설정(오토 레이아웃 등)을 지원한다.
그룹(Group)
그룹은 여러 개의 레이어를 하나로 묶는 기능이다.
그룹 안의 레이어들은 서로 연결되어 있어 한번에 이동하거나 변형할 수 있다.
그룹은 프레임과 달리 고유의 좌표계가 없다.
그룹의 크기를 조절해도 안에 있는 레이어들의 크기나 위치는 변하지 않는다.
그룹은 프레임에 비해 반응형 디자인 설정 옵션이 제한적이다.
서비스 디자인 기획
서비스 디자인 기획시 좋은점
-
사용자 중심 서비스 제공
사용자의 니즈와 불편함을 분석하여 더 나은 경험을 제공할 수 있음. -
서비스 차별화 & 경쟁력 확보
기획 단계에서 경쟁 서비스와 차별화 요소를 고민할 수 있음.
단순한 기능 제공이 아니라, 브랜드 아이덴티티가 있는 서비스로 발전 가능하다! -
개발 비용 절감 & 리스크 최소화
처음부터 탄탄하게 기획하면 불필요한 수정 비용이 줄어들게 된다. -
원활한 커뮤니케이션 & 협업
기획이 명확하면 개발 속도도 빨라지고, 협업 시 커뮤니케이션 효율이 증가함.
페르소나
페르소나는 서비스의 주요 사용자 유형을 구체적으로 정의하는 과정이야.
페르소나를 하면 좋은점?
1.사용자 중심의 서비스 기획 가능
단순한 감이 아니라 실제 사용자의 입장에서 서비스를 설계할 수 있다.
2.일관된 UX/UI 설계 가능
서비스의 주요 사용자 특성을 반영한 UX/UI를 설계할 수 있다.
3.불필요한 기능 개발 방지 → 비용 절감
필요 없는 기능 개발을 줄여 비용 절감 + 프로젝트 효율성 증가!
