ui/ux 앱에 '우와-하는' 요소를 추가하는 방법

[Kori]

이안 바커 (Ian Barker)의 "How To Add The Wow Factor To Your Apps" 를 번역했습니다. (원문 작성: 2020년 10월 31일, 최종 번역: 2022년 11월)

엠바카데로 델파이 MVP로 활동하는 것은 매우 재미있다. 엠바카데로를 대신해서, 내가 생각하기에 우리가 사용하려고 선택할 수 있는 가장 좋은 애플리케이션 구축 소프트웨어의 장점을 시연한다. 하지만, 다른 컨퍼런스, 웨비나, 행사 등 광범위한 사용자 그룹, 리셀러, 기술 파트너로부터 초청받은 곳에서 발표를 하기도 한다 . 이번 주 초에는 기술 파트너사인 Softacom이 주관한 행사에서 발표를 했다. 주제를 골라야 했는데, 나는 RAD 스튜디오에서 델파이를 사용해서 앱에 '우와-하는' 요소 몇가지를 넣는 방법을 주제로 골라서 이야기를 했다. 해당 발표는 아직 다시보기가 제공되지 않지만, 제공되면, 이 글에서 다시보기를 할 수 있도록 업데이트하겠다.

지금부터 소개하는 비디오는 15 분짜리 짧은 웨비나 영상이다. 이것은 2022년 11월 3일에 진행할 1 시간짜리 세션 중 일부를 미리 보여 준다.

목차

'앱에 '우와-하는' 요소를 추가하는 방법' 웨비나 다시보기가 제공되나?

앱에 '우와-하는' 요소를 추가하는 방법 - 무엇을 이야기하나?

'우와-하는' 요소를 가진 좋은 사례를 볼 수 있는 곳은?

내 델파이 날씨 앱 예시는 어떻게 생겼나?

이 예시 앱을 만들 때 필요한 코드는?

이 '우와-하는' 앱은 뒤에서 작동하는 코드가 있나?

이 '우와-하는' 예시 앱의 전체 코드는 여기에 있다.

델파이, 파이어몽키, 기타 앱 UI 디자인 팁을 어디에서 배울 수 있나?

'앱에 '우와-하는' 요소를 추가하는 방법' 웨비나의 밢표자료는 어디에 있나?

---

'앱에 '우와-하는' 요소를 추가하는 방법' 웨비나 다시보기가 제공되나?

그렇다. 지금 볼 수 있다. 아래 15분짜리 영상보다 더 긴 1 시간짜리 웨비나는 다른 글에서 따로 소개하기로 한다.

앱에 '우와-하는' 요소를 추가하는 방법 - 무엇을 이야기하나?

이 세션에서는 앱을 시각적으로 예쁘게 할 때 사용할 수 있는 몇 가지 무료 자료에 대해 이야기한다. 하단에 있는 발표자료는 1 시간짜리 전체 세션용이다. 어느 세션이든, 주요 요점은 강력한 크로스-플랫폼 앱을 만들 때 델파이로 얼마나 쉽게 할 수 있는가 하는 것이다. 델파이는 이런 것들을 훌륭하게 반영한다. 그리고 현대적이고 보기 좋은 UI(사용자 인터페이스)의 요소를 모두 갖추고 있다. 앱이 더이상 '회색 슬라브'일 필요가 없다. 현대식 UI에서 핵심 속성은 움직임(motion), 색상, 깊이(depth), 반응형(responsive) 디자인이다.

'우와-하는' 요소를 가진 좋은 사례를 볼 수 있는 곳은?

가장 이상한 점은 바로 데스트탑이든 모바일이든 거의 모든 운영 체제에서 '날씨 앱'은 책에 나오는 모든 트릭과 기술을 거의 항상 사용한다는 점이다. 생각해보면, 우리는 날씨 앱을 통해서 배울 수 있는 것들이 매우 많다. 날씨 앱은 본질적으로 대시보드 앱이기 때문이다 - 시간에 민감한 데이터를 인터넷에서 받아 와서 다양한 방식으로 표현하여 (종종 매우 다양한) 데이터를 가능한 가장 간결하고 쉽게 이해할 수 있도록 한다.

내 델파이 날씨 앱 예시는 어떻게 생겼나?

나는 파이어몽키와 Skia4Delphi를 사용하여 델파이 앱을 하나 만들어서 보여주었다. 이 앱은 멋져 보인다 - 내 입으로 말하기는 좀 그렇긴 하지만 - 그리고, 델파이 RTL과 파이어몽키 FMX의 표준 기능 외에는 거의 아무것도 사용하지 않고 만들었다. 나는 무료 Skia4Delphi 컴포넌트를 사용하고, 로티 애니메이션을 몇 개도 사용했다. 또한 그럴듯한 그래픽 표현을 위해 무료 SVG 몇 개도 사용했다.

이 예시 앱을 만들 때 필요한 코드는?

나는 주로 파이어몽키에 들어있는 이벤트 기반 애니메이션 효과(animation effects)를 사용하여 몇몇 컨트롤의 투명도(Opacity) 값을 자동으로 조정했다 - 그리고 화면 요소들이 제자리로 부드럽게 미끄러져 들어가도록 했다. 좋은 현대 UI 디자인 중 깊이(depth)와 움직임(motion)을 이렇게 반영한 것이다.

애니메이션을 반영하고 싶은 요소 또는 영향을 주고 싶은 요소를 선택했다. 그리고 “create new float animation”을 클릭했다. 그러면,

위와 같이 스트럭처 뷰(structure view)에 새 AnimationEffect가 하나 생긴다.

...이제 그 새 AnimationEffect의 프로퍼티(들)을 변경하자 - 특히 Trigger, Duration, StartValue, StopValue, PropertyName.

이 속성들은 Trigger 프로퍼티의 값에 지정된 표현식이 true가 되는 시점에, 이 AnimationEffect의 부모 컨트롤에 발생되는 애니메이션 효과를 설정하는 것들이다. 위 예시에서, 델파이와 파이어몽키 FMX는 이 효과의 부모 컨트롤에서 IsVisible 프로퍼티가 True가 될 때 그 투명도(opacity) 값을 1 (불투명)에서 0 (완전히 투명)으로 바꾼다. 바꿀 때 반영될 이 애니매이션 즉 전환 효과는 2초 동안 진행된다. 그 결과 애니메이션이 점점 희미해지면서 사라지게 된다. 어떻게 하는지를 알고 나면 매우 쉽다.

이 '우와-하는' 앱은 뒤에서 작동하는 코드가 있나?

나는 코드를 조금 적어야 했다. 코드에서는 화면 요소들이 표현되는 순서를 지정해주었다. 또한 쓰레드(thread) 를 사용하여 1 초 지연 후에 진행을 시작하도록 했다 - 1 초는 애니메이션이 완료 후에 사용자가 '해돋이' 를 감상하기에 충분한 시간이다. 쓰레드를 사용하면, 애니메이션이 끝나기를 기다리는 동안에도 사용자 입장에서는 앱이 여전히 반응한다. 

이 '우와-하는' 예시 앱의 전체 코드는 여기에 있다.

전체 소스 코드를 받을 수 있는 곳: https://github.com/checkdigits/wow_app_example

해당 부분만 보면 다음과 같다.

implementation
uses System.Threading;

{$R *.fmx}
{$R *.iPhone47in.fmx IOS}

{ TForm1 }

procedure TForm1.MainPanelEffectFinish(Sender: TObject);
begin
  CurrentWeatherAnimation.Visible := True;
end;

procedure TForm1.StaticAnimationEffectFinish(Sender: TObject);
begin
  MainPanel.Visible := True;
end;

procedure TForm1.DoNextAnimation;
var
 aTask: ITask;
begin
  // UI가 반응을 유지할 수 있도록 한다, 우리가 1 초를 기다리는 동안...
  // Task 쓰레드를 사용하여 이것을 수행한다
   aTask := TTask.Create(
         procedure
         begin
           Sleep(1000);
           // UI를 업데이트한다 - 그러므로 메인 쓰레드를 Synchronize 해야 한다...
           TThread.Synchronize(TThread.Current,
             procedure
             begin
               MainAnimation.Enabled := False;
               MainAnimationEffect.Start;
               end);
           end);
   aTask.Start;
end;

procedure TForm1.FormCreate(Sender: TObject);
begin
  // 모바일 장비에서 이 패널(panel)은 가장자리에 가까이 있어야 한다.
  // 우리가 목표로 하는 장비에 맞도록 최적화된 화면을 파악해서 직접 지정한다
  // 그래야 모든 목표 장비에서 '좋아' 보인다.
  {$IF DEFINED(IOS) or DEFINED(ANDROID)}
  FloatAnimation1.StopValue := 7;
  {$ENDIF}
end;

procedure TForm1.MainAnimationAnimationFinished(Sender: TObject);
begin
  DoNextAnimation;
end;

procedure TForm1.MainAnimationEffectFinish(Sender: TObject);
begin
  MainAnimation.Visible   := False;
  StaticAnimation.Visible := True;
end;

델파이, 파이어몽키, 기타 앱 UI 디자인 팁을 어디에서 배울 수 있나?

웨비나에 등록하면 웨비나에 참여할 수 있고, 종료된 웨비나라면 다시보기를 할 수 있다. 또는 이 글에서 앞 부분에도 다시보기를 할 수 있다. 다음 주에는 보다 깊이 있게 그리고 몇 가지 예시 프로그램을 더 보면서, 현대 UI를 갖춘 멋지게 보이는 앱을 만드는 모든 팁과 트릭을 시연한다.

'앱에 '우와-하는' 요소를 추가하는 방법' 웨비나의 밢표자료는 어디에 있나?

'앱에 '우와-하는' 요소를 추가하는 방법' 슬라이드 1

'앱에 '우와-하는' 요소를 추가하는 방법' 슬라이드 2

'앱에 '우와-하는' 요소를 추가하는 방법' 슬라이드 3

'앱에 '우와-하는' 요소를 추가하는 방법' 슬라이드 4

'앱에 '우와-하는' 요소를 추가하는 방법' 슬라이드 5

'앱에 '우와-하는' 요소를 추가하는 방법' 슬라이드 6

'앱에 '우와-하는' 요소를 추가하는 방법' 슬라이드 7

'앱에 '우와-하는' 요소를 추가하는 방법' 슬라이드 8

'앱에 '우와-하는' 요소를 추가하는 방법' 슬라이드 9

'앱에 '우와-하는' 요소를 추가하는 방법' 슬라이드 10

'앱에 '우와-하는' 요소를 추가하는 방법' 슬라이드 11