🗂️ [5화] 명함 리스트와 공유 기능은 이렇게 만들었습니다

 

안녕하세요!
이번 글에서는 저희가 개발 중인 **전자 명함 앱 ‘명함톡’**에서 구현한
명함 리스트 UI 구성과 공유 기능에 대해 소개하려고 합니다.

---

📋 명함 리스트, 어떻게 만들었을까?

명함톡에서는 총 3가지 명함 목록을 구분해서 관리할 수 있도록 구성했습니다.

• 내 명함: 내가 등록한 명함
• 외부 명함: 내가 직접 입력한 다른 사람의 명함
• 공유 받은 명함: 다른 사용자로부터 전달받은 명함

각 탭은 상단에서 버튼 UI로 전환 가능하고,
사용자가 직관적으로 원하는 목록을 볼 수 있도록 구성했어요.

📸 실제 화면 예시

---

🔄 명함 상세보기

명함을 클릭하면 바로 상세 정보 화면으로 진입합니다.
여기서는 이름, 회사, 연락처, 메일, 메모 등을 한눈에 확인할 수 있어요.

📸 상세 정보 화면

---

📤 명함 공유 기능

이번에 새롭게 구현한 기능 중 가장 중요한 포인트는 바로 이 공유하기 기능입니다.

명함을 전달할 때,

• 내 이름
• 내 전화번호
• 전달 메시지

를 함께 입력할 수 있도록 만들었고,
BottomSheet로 자연스럽게 열리는 전송 창을 구성했습니다.

📸 공유하기 화면

전송 버튼을 누르면,
해당 명함과 함께 입력한 메시지가 상대방에게 전달되며,
상대방은 ‘공유 받은 명함’ 탭에서 그 내용을 확인할 수 있습니다.

---

💡 작업하면서 고려한 UX 요소들

• 명함 카드 UI는 텍스트 길이에 따라 반응형으로 동작
• 공유 버튼은 상세 화면과 기능 연결성을 고려해 하단 고정
• 공유 받은 명함은 받는 시점 기준으로 정렬
• 동일한 명함을 여러 번 공유받더라도 중복 표시되지 않도록 처리

---

✅ 마무리

이번 작업을 통해
“단순히 데이터를 보여주는 리스트”가 아니라,
**사용자 행동 흐름(조회 → 확인 → 공유)**까지 고려한 UI/UX 설계를 실현해보았습니다.