작년 8월경 처음으로 IOS 개발자가 되기로 마음을 먹고 swift 공부를 시작했습니다.
올해 상반기 취업을 생각하며 공부를 했고 드디어 앱 출시까지 성공했습니다.
간단한 어플이지만 모든게 처음인지라 어려움도 있었고 재미도 있었네요.
https://itunes.apple.com/us/app/푸드컵/id1449364130?l=ko&ls=1&mt=8
뭐 먹을지 매번 고민하는것을 간단한 월드컵 방식으로 선택하고 주변 음식점 위치까지 찾아줍니다.
또 다른 기능으로는 사진, 메모, 위치를 추가하여 자신만의 맛집리스트를 만들 수 있습니다.
피드백 주시면 감사하겠습니다!
개인이 앱하나 마켓에 출시하는것이 엄청 힘들죠..
기본 아이디어를 서포트하는 여러 작은 아이디어들과 테크가 조합된 것이 좋네요.
개인적으로 가장 좋은 테크는 현재 아이디어를 네트웍(종류에 상관없이-인터넷, 소셜 등)에 연결 시키는 건데 그것도 보이구요.
vs 스타일을 보니 주커버그가 대학 때 했던 얼굴사진 vs가 떠 오르네요.
디자이너인 관계로 딱 하나만 짚어 보자면 사진을 회전시켜 vs로 표현 하는 것 보다 그냥 정상 박스로 하되 모퉁이를 cornerRounded로 적당히 둥글게하고 테두리를 좀 두껍게 주어 vs로 다루면 어떨까 싶네요. 테두리 색상은 주황으로다가..(주황이 식욕을 돋구는 칼라 거든요)-실험해 보시고 아니다 싶으면 롤빽.. 이렇게 깔끔하게 가도 되고 여기에 두 사진들이 대전하듯 vs 쪽으로 붙는 애니메이션이 작동해도 괜찮구요.(쓸데 없이 애니메이션을 가동하면 더 이상해 질 수도 있습니다)
그리고 아직 초입이시니 UX도 파 보시면 더 좋은 앱들을 만드실 수 있을 거 같습니다. 요즘 프로그래머는 UX에 대한 덕목도 갖추어야 더 좋은 곳에 취업할 수 있을 거에요.
UX의 기본은 어렵지 않습니다. 일반적으로 사람들이 이 아이디어에 대한 UI(User Interface)를 어떻게 인식하고, 이 상황에서 생각과 신체를 어떻게 움직이려 할까를 고민해 보면 됩니다. 그리고 그걸 가능한 세련되게 풀어 내면 되겠죠. 부족한 세련미는 구글링-이미지, 핀터레스트가 도와 줄 겁니다.
저는 이 두 가지를 UX/UI 순서로 호칭합니다.
즉, 사용자 경험(UX)에 의한(염두한) 사용자 인터페이스(UI)를 디자인 하다
코딩하는 입장의 시각을 유지한 채 UX를 풀어 내기는 쉽지 않습니다. 귀찮아 질테고 왜 그걸 해야 하는지 이해하지 못하는 상황에 빠질 가능성이 큽니다. 그러니 철저히 일반인의 시각을 유지하신 채 바라봐야 절충 또는 개선된 코딩 피드백을 얻을 수 있습니다. 물론 그러한 통찰이 처음부터 쉬울 순 없으니 꾸준히 습관화 하시면 좋을 것 같네요. 이 방법으로 지금 앱을 다시 점검해 보시면 어렵지 않게 개선점을 발견하실 수 있을 것 같습니다.
다음에도 신선한 앱과 취업에도 좋은 소식이 있으시길~
ps. 면접에서 맛집 정보는 어떻게 끌어 온 건가요? 라고 물으면 조용히 “나중에 알려 드릴께요”로 응수 하세요. ㅎㅎ
그래서 이 문제를 해결하려는 시도 또한 좋았습니다. 여기서 대결(vs)이라는 느낌상 튀게(개인적으로 이 단어가 어울릴 수록 마이너스 요소가 된다고 생각하는데-튀게 보다 다르게가 좋습니다) 하려고 한 시도 역시 가야할 길이긴 합니다만, 이 사진을 지속적으로 기울여 놓은 것은 소비자의 시선으로 볼 때 불편한 시각적 상황이 될 여지가 큽니다. 본질적으로 이 앱에서 차용하고자 하는 대전(vs)이 '타격'을 의미하는게 아니라(비틀거리는게 아니라) 단순히 대결 '구도'를 나타내고자 했을 이유가 클 겁니다. 그래서 차라리 음식 이미지를 기울이는 시각적 불편함을 택하는 대신 'vs'라는 단어가 충분히 대결 구도를 표현하고 있으므로 사진은 그대로 두고 음식 이미지를 다듬거나 cornerRounded로 다듬어 약간의 카드 대결의 느낌(추가적으로 보더를 주는 등의 시도)으로 풀어 좀 더 세련된 방법으로 재해석 해 보는게 더 낫지 않겠나 하는 겁니다.
여기에 더해 vs를 기준으로 첫 이미지는 왼쪽에서 뷰로 들어 오는 빠른 애니메이션, 두번째 이미지는 오른쪽에서 뷰로 들어 오는 애니메이션이 동시에 펼쳐진다거나..(이렇게 들어오고 나가는 과정에서 약간 비틀거리거나 흔들리는 애니메이션을 추가적으로 보여 줄 수는 있을 거에요.-아마 이부분의 인상 때문에 이미지를 틀어 놓았을 수도 있었다고 생각합니다.) 요즘 강조나 포인트를 주는 트랜지션으로 아주 잠깐 동안 박스 중심점을 두고 기준 박스보다 약간 키웠다가 (대략 108%정도?) 기준 크기보다 약간 줄였다(대략 97%정도?) 다시 원래 사이즈로 키우는 방식을 많이 쓰더군요. 이 상태에서 빠르게 사라지고 다음 대전 메뉴가 바로 나타나도 좋을 것 같네요. ios button puls(or heartbit) animation과 같은 것에서 레퍼런스 하면 좋을 것 같아요.
이렇게 장황하게 풀어 놓는 것은 전문 디자이너라면 다년간의 경험을 통해 직관적(직관능력==유사경험의수)으로 느낄 수 있을 부분이나 이 부분의 경험이 적으면 어느 부분에서 중요한 실수가 있었는지 깨닫는데 오랜 시간이 걸리기 때문입니다. 그리고 그 때는 지금의 프로젝트에서 이미 손을 뗀 시점일 가능성이 큽니다.
+ 그리고 Win 음식을 액자에 '걸어' 두는 이미지도 다르게 한 번 표현해 보시면 좋을 것 같습니다.(걸이 부분을 빼고 액자만 잘 표현해도 좋을것 같아요.) 그림에서 너무 챔피언이나 트로피 등을 굳이 표현 하지 않아도 심플하게 타이틀을 거머쥔 표현을 찾을 수 있지 않나 생각합니다.(수상대에 올라 와 있다거나..)
+ vs를 로만체 보다 좀 더 볼드한 고딕형으로 심플하게 디자인 해도 괜찮을 거 같네요.
2017년부터 맥 구매시 시작했는데 이제 아이디어 정리해서 작업중이네요 ㅠㅠ 부럽
퇴근하고 시간나서 애 재우고 짬내서 하니라 빡시네요 ㅎ
거의 어도비 애프터이펙터 류를 사용한 듯 한게 많이 보여서(실제 코딩으로 구현한 것도 많이 있습니다. 관련 오픈소스도 많구요.) 감 조차 안잡히는 경우가 많을 텐데 억지로 따라 구현할 필요는 없을것 같구요. 자신의 한계치 내에서 시도해 보는게 좋을 것 같습니다. 차차 실력을 올리면 되니까요. 스터디 하다 보면 UX를 떠 받쳐줄 알고리즘에도 자신감이 모아지니 좋죠.
초기 앱 만들 때 중요한 건 아이디어 구현이지, 남들 UX까지 억지로 따라할 필요는 없다고 생각해요. 다만 많이 보아 두면 애니메이션이 없어도 레이아웃(이것도 엄연히 UX에 포함) 같은 부분에서 도움을 많이 받을 거에요.
결론적으로 해당 앱의 계획적인 UX를 통해 사용자에게 어떤 매너로 접근할 건지 먼저 어느정도 정해지고, 사용자는 그 분위기의 전반적인 느낌적인 느낌(?)에서 UI를 다루게 됩니다. 저도 많이 부족하지만 아직까지 제가 깨달은게 이 정도 인것 같아요. 그래서 UI/UX가 아닌 UX/UI라고 칭합니다.
살짝 힘주면서 강조하는 방식으로 승리에 대한 맥락을 이어가면 심플하게 좋지 않을까 해서..
제 경우엔 맥용 앱 제작시 비슷하게 구현하긴 하는데, 직접 코딩하면서 그 타이밍에 따른 느낌적인 느낌을 만들어 가야 하고, Core Animation의 easy curve를 사용하거나, 필요에 따라 custom curve를 사용할 수도 있습니다. Lab_MacAnimationTest1 이런식으로 세부 묘사만 먼저 실험용 프로젝트를 만들어 보고, 됐다 싶으면 본 프로젝트에 이식하는 방법을 취합니다.
뭐.. 직접 프로젝트를 진행하시는 분이 가장 잘 아시겠지만 제3자인 제가 생각하는 느낌과 실 프로젝트의 느낌과 맞는지는 해 봐야 아는 거라..^^
머릿속으로 해당 부분에서 UX를 충분히 미리보기 해 보시고 시도 하세요.(사용자의 손가락 위치나 움직임까지 염두에 두고-동선이라고도 하죠.)
https://evgenii.com/blog/spring-button-animation-with-swift/
이건 너무 쓸데없이 출렁여서 맞진 않는데 역시 하스스톤쪽 느낌이 확실히 낫네요.
제일 좋은 분석은 위 유튭영상을 슬로우로 재생해 보시거나 다운로드 후 영상 재생 툴에서 프레임 단위 또는 슬로우로 재생해 보면서 타이밍 간격을 레퍼런스 하세요.
아마도 한계가 있을것도 같은데 가장 비슷한 펑션커브로만 우선 해 보시면 될 거에요. 저런 UX는 블리자드 똑똑한 개발자들이 만든 커스텀 펑션 커브라.. 저도 커스텀 구현 하면서 헬을 많을 겪어서.. 쉽게 권장하진 못하겠네요. ㅎㅎ
https://developer.apple.com/videos/play/wwdc2018/803/
https://medium.com/@nathangitter/building-fluid-interfaces-ios-swift-9732bb934bf5