1주차 미션/ 1조 김세연

[rlatpdusdlqslek-spec]

1. 미션

프로필 카드
도형
간격
사진 추가

2. 구현에 대한 설명

1. 전체 레이아웃 구조 (Layout Hierarchy)

본 프로젝트는 Box-Column-Row의 계층 구조를 활용하여 화면을 구성했습니다.

• Box: 화면 전체(fillMaxSize)를 차지하며, contentAlignment = Alignment.Center를 통해 내부 콘텐츠를 화면 중앙에 배치했습니다.
• Column: 상단의 도형 연습 영역과 하단의 명함(BusinessCard) 영역을 수직으로 배열했습니다. Arrangement.spacedBy(20.dp)를 사용하여 요소 간의 일정한 간격을 유지했습니다.
• Row: 도형 연습 영역에서 왼쪽(사각형 계열)과 오른쪽(원형 계열) 배치를 위해 수평 레이아웃을 사용했습니다.

2. 주요 Modifier 활용 및 속성 제어

Compose의 핵심인 Modifier를 사용하여 각 요소의 디자인을 세밀하게 제어했습니다.

• 도형 및 테두리 구현: background와 border 속성을 활용했습니다. 특히 shape 파라미터에 RoundedCornerShape와 CircleShape를 전달하여 각진 사각형, 둥근 사각형, 원형 등 다양한 형태를 실험했습니다.
• 이미지 커스텀 (Image Cropping):
  • Modifier.clip(CircleShape)를 사용하여 사각형 이미지를 원형으로 잘라냈습니다.
  • ContentScale.Crop을 적용하여 이미지가 지정된 영역(size) 내에서 비율을 유지하며 가득 차도록 구현했습니다.
• Modifier 순서의 중요성:

  예: .padding(8.dp).background(Color.Red)와 같이 순서를 조합하여 테두리와 내부 콘텐츠 사이의 여백을 시각화했습니다.

3. 컴포저블의 재사용성 (Modularization)

코드의 가독성과 유지보수성을 높이기 위해 UI를 부품화했습니다.

• BusinessCard(): 명함의 전체적인 외형(Card)과 내부 배치를 담당하는 독립적인 컴포저블로 분리했습니다. Card 컴포저블에 elevation을 주어 입체감을 더했습니다.
• InfoText(label, value): 이름, 학번 등 반복되는 텍스트 패턴을 하나의 컴포저블로 만들었습니다. 매개변수만 바꿔서 호출함으로써 코드 중복을 최소화했습니다.

4. 디자인 디테일

• Typography: fontSize와 fontWeight를 다르게 설정하여 라벨(Label)과 실제 데이터(Value) 간의 시각적 위계(Hierarchy)를 구분했습니다.
• Shape & Color: 카드에는 RoundedCornerShape(24.dp)를 적용하여 부드러운 인상을 주었고, 깔끔한 검정색 테두리로 가독성을 높였습니다.

3. 스크린샷

4. 기타

[1hyok]

카드가 Row Column에 대해 갖는 장점은 그림자가 모양을 지정해 주지 않아도 자동으로 카드의 모양을 따라간다는 것인데요, 피그마 디자인 상으로 그림자가 없어서 elevation을 쓸 필요가 없기 때문에 카드로 감싸지 않는 것이 좋습니다! 카드를 없애고 바로 하위에 있는 컬럼에 카드에 적용했던 스타일을 적용하면 됩니다

[1hyok]

말씀드렸다시피 이렇게 가장 바깥 컴포넌트에 크기를 지정하는 대신, 가장 내부에 있는 컴포넌트에 크기를 지정하고 감싸야 되는 포인트입니다

[1hyok]

이 Arrangement와 내부의 Spacer로 간격 적용이 중복되었는데요 둘 중 하나로 통일하는 것이 좋습니다!

[1hyok]

말씀드린 것 지키면서 피그마 디자인과 똑같이 구현하려고 노력해 보시면 좋겠습니다 수고하셨습니다~