안녕하세요, '커넥트' 앱을 만들고 있는 1인 개발자입니다.
잠시 개발 일지가 뜸했습니다
지난 일요일에 넥토리얼 코딩 테스트가 있어 며칠간은 알고리즘 문제와 씨름하느라 정신이 없었습니다.
3시간을 꽉 채워 9문제 중 6솔 정도의 성적을 받았는데,
마지막 문제는 구경도 못 해본 아쉬움이 조금 남네요.
코딩 테스트 회고는 조만간 별도의 포스트로 찾아뵙기로 하고, 다시 본업(?)인 앱 개발로 돌아와 멈췄던 부분부터 차근차근 진행해보겠습니다!
지난 편에서는 앱의 주요 화면 UI 뼈대를 잡는 과정을 공유했습니다. 이번 3편에서는 그중에서도 가장 동적인 기능이 필요했던 '연애 타로' 상세 화면을 구현하며 겪었던, 눈물 없이는 볼 수 없는 애니메이션과의 사투(?)와 그 해결 과정을 상세히 기록해보려 합니다.
목표: 정적인 화면을 넘어, 사용자의 경험을 우선으로..
단순히 운세 결과를 텍스트로 보여주는 것을 넘어, 사용자가 정말로 카드를 섞고 펼쳐서 그중 하나를 직접 고르는 듯한 몰입감 있는 경험을 주고 싶었습니다. 목표는 명확했습니다.
- 리얼한 카드 펼침: 모든 카드를 화면에 펼쳐 보여주기
- 사용자 선택: 그중 하나를 사용자가 직접 선택
- 결과 확인: 선택한 카드의 의미를 깔끔한 다이얼로그로 보여주기
처음에는 이 과정이 간단할 것이라 생각했지만, '리얼한 카드 펼침'이라는 첫 단계부터 엄청난 도전을 마주하게 되었습니다.
험난했던 부채꼴 애니메이션 도전기 (feat. 중력과 수학)
'카드를 손으로 촤라락 펼친 듯한' 느낌을 주기 위해 React Native의 Animated API를 사용해 부채꼴 모양 애니메이션에 도전했습니다.
1차 시도: 단순 회전과 이동
각 카드의 인덱스를 기반으로 rotate와 translateY 값을 조절하는 간단한 로직으로 시작했습니다.
// 초기 접근 방식
const rotate = (index - middleIndex) * 7;
const translateY = Math.abs(index - middleIndex) * -4;
결과는... V자 모양이었습니다. ㅋㅋㅋㅋㅋ 카드가 승리를 기원해주더군요.
2차 시도: 포물선 공식 도입
V자 모양을 해결하기 위해, Y축의 움직임을 2차 함수(포물선) 형태로 바꾸어 더 아름다운 아치를 그리도록 코드를 수정했습니다.
const translateY = Math.pow(index - middleIndex, 2) * -1.5;
결과는... 아치는 아치인데, 카드들이 모두 누워버리는 현상이 발생했습니다. transformOrigin(회전 중심축)을 제대로 제어하지 못해 생긴 문제였습니다. 이 문제를 해결하기 위해 여러 방법을 시도했지만, 모든 기기에서 일관된 애니메이션을 보여주기가 너무 어려웠습니다.
최종 결정: 사용자 경험에 집중한 3x10 그리드
복잡한 애니메이션이 오히려 사용자 경험을 해칠 수 있다는 판단하에, 과감하게 부채꼴 애니메이션은 포기했습니다. 대신, 더 직관적이고 안정적인 방향으로 목표를 수정했습니다.
- 레이아웃: 10장씩 3줄로 배열된 깔끔한 그리드
- 애니메이션: 카드가 순서대로 나타나는 간단한 '딜링' 효과
- 위치: 화면의 중앙보다 살짝 위쪽에 배치하여 안정감 부여
이 과정을 통해, 화려한 기술보다 안정적이고 예측 가능한 사용자 경험이 더 중요하다는 교훈을 얻을 수 있었습니다.
다음 목표
드디어 운세/타로 기능의 UI 구현이 만족스럽게 마무리되었습니다. 이제 정말로 나머지 화면들의 UI를 완성하고 다음 단계로 나아갈 시간입니다.
- 채팅방 목록 화면 UI 구현
- 마이페이지 UI 구현
- 게시글 상세 보기 화면 구현
모든 화면의 UI가 완성되면, 드디어 Firebase를 연동하여 앱에 실제 데이터를 불어넣는 작업을 시작할 예정입니다. 다음 개발 일지에서 새로운 화면들과 함께 돌아오겠습니다!
꾸준 하시군요.. 리스펙합니다