반응형 UI를 이론으로는 이해했더라도, 화면을 만들기 시작하면 '어디부터 그룹으로 묶어야 하지?', '어떤 요소에 Fill을 줘야 자연스럽게 늘어날까?'처럼 헷갈릴 때가 많아요. 이번 글에서는 플렉스튜디오에서 배치 기능을 단계별로 적용해 채팅 리스트 UI를 완성하는 과정을 함께 따라가 보겠습니다.
프로필 이미지와 텍스트 영역(닉네임, 위치, 시간, 메시지 영역) 함께 선택
단축키 사용하여 그룹 설정 : Ctrl + G (Windows) / ⌘ + G (Mac)
3. Design 탭 하단의 배치 속성에서 가로 배치를 선택
4. 간격(Gap) 설정 (예시 : 4px)
프로필 이미지 선택
2. 화면의 크기와 상관없이 이미지 사이즈가 변하지 않도록 원하는 크기로 고정 (예시 : 40px)
텍스트 영역에서 닉네임, 위치, 시간을 먼저 선택해서 그룹으로 묶기
이 그룹에 가로 배치를 넣고 너비 값을 따로 입력하지 않은 채로 간격만 설정
3. 닉네임+위치+시간 그룹과 메시지 본문을 함께 선택해 다시 한 번 그룹으로 묶기
4. 두 번째(상위) 그룹에는 세로 배치를 적용하고 간격을 설정 (예시 : 4px)
메시지 본문 선택
너비를 100%로 설정 : 화면 폭이 바뀔 때 텍스트 영역만 자연스럽게 늘어나거나 줄어들게 됩니다.
프로필+텍스트 그룹과 쇼파 썸네일 이미지 함께 선택해서 그룹으로 묶기
그룹에 가로 배치와 간격 설정 (예시 : 4px)
3. 쇼파 썸네일 이미지도 프로필 이미지처럼 원하는 크기로 고정
그룹 전체 선택
2. 좌측 가운데 정렬로 맞춰 주면 완성!
완성된 UI를 복제해서 여러 개 나열하면 채팅 리스트가 완성됩니다. 화면 크기를 바꿔도 이미지 영역은 고정되고 텍스트 영역만 변하기 때문에 다양한 해상도에서도 안정적으로 보여요. 시나리오 상단 속성 창에서 스텝 사이즈를 조절하는 옵션이 있으니 크기를 바꿔가며 어떤 요소가 늘어나고 줄어드는지 확인해 보세요.
처음엔 그룹을 여러 번 묶는 흐름이 낯설 수 있지만, 몇 번만 반복해 보면 금방 손에 익숙해 질 거예요. 오늘 실습한 구조를 기준으로 원하는 형태의 UI에도 배치 기능을 자유롭게 적용해 보세요.