제로에서 아름다운 UI까지: Uno Platform Hot Design을 사용해 Instagram과 같은 레이아웃을 만든 방법 🔥

Source: Dev.to

왜 이 챌린지에 Uno Platform Hot Design을 사용했는가

사실 Uno Platform을 직접 선택한 건 아니었습니다; 이 기회는 챌린지를 통해 찾아왔죠.
.NET 개발자라면 흔히 겪는 고충을 잘 아실 겁니다:

• UI 레이아웃이 느리다
• 미리보기가 지연된다
• Hot Reload가 가장 안 좋은 타이밍에 깨진다
• 크로스‑플랫폼 UI? 더 힘들다

Hot Design은 이러한 경험을 완전히 뒤바꾸어, 앱이 실행 중일 때 실시간 업데이트를 제공했습니다. 워크플로우가 훨씬 부드럽고 빠르며, 진정으로 즐거워졌습니다.

첫 번째 시도: 나의 “못생긴 버전”

솔직히 말하자면, 이 버전은 인스타그램이 아니었습니다. 초기 버전은 여정이 어디서 시작됐는지를 보여줍니다.

최종 레이아웃 설계

앱을 깔끔하고 신선하게, 실제 인스타그램 프로필 화면과 가깝게 보이면서도 Hot Design 데모용으로는 충분히 단순하게 만들고 싶었습니다. 핵심 디자인 목표:

• 단순하고 미니멀한 상단 섹션 – 프로필 이미지, 통계, 바이오, 링크.
• 가로 스토리 버블 – 실제 테두리와 라벨을 넣어 인스타그램을 흉내냄.
• 깔끔한 탭 선택기 – (게시물 그리드, Reels, Tagged 아이콘).
• 반응형 그리드 – 3열, 동일한 간격, UniformToFill 이미지.
• 적응형 레이아웃 – 데스크톱과 모바일 모두에서 동작 (스크린샷 포함).

색상 스타일, 간격, 아이콘을 실험한 뒤 최종 디자인이 완성되었습니다.

최종 디자인: 데스크톱 버전

(여기에 데스크톱 스크린샷 삽입)

최종 디자인: 모바일 버전

(여기에 모바일 스크린샷 삽입)

전체 데모 영상 🎥

데모 영상 보기

GitHub 저장소 🐈

GitHub에서 소스 코드 탐색

배운 점 (핵심 정리)

1. Hot Design은 프로토타이핑에 엄청나게 빠르다 – 실시간 피드백이 모든 것을 바꿨다.
2. Uno는 크로스‑플랫폼 개발을 예측 가능하게 만든다 – 동일한 XAML이 데스크톱, 모바일, 그리고 향후 타깃에서도 동작한다.
3. 좋은 UI는 반복이 필요하다, 특히 간격 – 패딩, 타이포그래피, 정렬을 다듬으며 레이아웃이 실제처럼 느껴졌다.
4. 워크플로우는 Figma + XAML의 조합 같다 – 시각적인 실험과 깔끔하고 프로덕션 준비된 코드가 결합된다.

Uno Platform 팀에 특별히 감사드립니다

• Hot Design을 출시해 주셔서 감사합니다.
• 함께 제공된 영상이 매우 도움이 되었으며, Hot Design을 시작한다면 꼭 시청해 보시길 권합니다.

마무리 생각

“작게 뭔가 해보자”는 생각으로 시작했지만, 결국 완전한 UI 재디자인 경험으로 이어졌습니다. 가장 중요한 부분? 정말 재미있었다는 점입니다. Hot Design을 시도해 보고 싶다면, 주저하지 말고 도전해 보세요.