자동차시트 기반 근접 공조 시스템 제어를 위한 모바일 애플리케이션 프로토타입 개발

1. 서 론

1.1 자율주행 시대의 도래와 차량 내 경험의 변화

전기차와 자율주행 기술은 자동차의 본질적인 개념을 재정의하고 있다. 운전이라는 주된 과업에서 해방된 탑승자들에게 있어, 차량은 단순한 이동 수단이 아닌 업무 및 휴식, 엔터테인먼트가 가능한 다목적 생활 공간으로 변모하는 추세다(Fig. 1).¹⁾

Fig. 1

The future of automotive interior design is moving toward a focus on living spaces

이 패러다임은 차량 내부설계의 초점을 운전자 중심에서 개인화 된 경험 중심으로 바꾸고 있다. 차세대 자동차 실내시스템도 운전자 위주에서 모든 탑승자 대상인 개별 맞춤 방식이 될 것으로 보인다.

1.2 기존 차량 공조 시스템의 한계

HVAC시스템과 제어방식은 내연기관차를 기준으로 설계하고, 물리입력 장치를 사용한 전통적인 PUI에서 디지털방식의 GUI제어로 진화했다. 현재 대형 터치스크린이 보편화돼 많은 기능을 화면 하나로 조작하는 중앙집중제어방식을 사용한다(Fig. 2).

Fig. 2

Most of control systems are built in the middle of dashboard, or screen in modern vehicles (Hyundai, BMW, Audi)

이는 특정 기능의 동작을 위해 중앙 대형 터치스크린을 장시간 주시하므로 운전자의 주의분산을 증가시키는 문제를 야기한다. 게다가, 운전자 위주의 제어 방식이기에 개인별 HVAC 공조경험이 강조되는 자율주행 환경에 적합하지 않다.³⁾

차량 내부는 외부의 급격한 온도 변화 및 창문을 통한 일사 부하, 국소적인 공기 흐름 등으로 인해 열적으로 복잡하고, 비 균일하며, 시간에 따라 급변하는 환경이다.^3,5) 이 상황에서 운전자가 모든 탑승자별 단일 구역을 세밀하게 조작하기는 어렵다.

또한, 개인의 신진대사율과 신체 상태(착용 의복, 연령, 성별 등 생리적, 개인적 요인 등)에 따라 열 쾌적성에 대한 선호도 크게 달라지므로 현재의 중앙집중제어 방식은 획일적이며, 필연적으로 일부 탑승자의 불쾌감을 유발한다.^4,8,13)

2. 관련 연구

3. 시트 기반 근접 공조 제어 애플리케이션 프로토타입 개발

3.1 연구 방법

본 연구는 Figma로 디자인 결과물 도출 후, 실제 워킹 프로토타입에 적용하는 방식으로 진행했다. 이를 통해 디자이너가 UI/UX 설계부터 구현 기반의 기능테스트로 작동 결과까지 확인했다.

3.1.1 시트 선정

프로토타입에 사용할 대상으로 현재 개발 중인 차세대 콘셉트 시트를 선정했다. 시트는 네 개의 독립된 구역(목, 등, 팔, 허벅지)에 대한 냉방 및 난방 온도를 조절할 수 있다(Fig. 3).^6,9,10)

Fig. 3

The heating/cooling system of the seat concept

3.1.2 시트 적용 대상

국부근접 냉난방시스템이 적용된 프로토타입 시트가 배치될 공간으로, 선행 연구에서 제작한 차세대 자율주행 전기차 실내 디자인을 선정했다(Fig. 4).⁹⁾

Fig. 4

Interior design for next-generation autonomous electric vehicle. Top: movable lounge, Bottom: mobile office

3.1.3 제어 플랫폼 선정

차량의 인포테인먼트 시스템 개발 주기나 성능에 구애를 받지 않고, 유연하게 개인 맞춤형 경험을 제공하는 방법은 모바일 기기를 사용하는 것이다. 본 연구는 안드로이드 환경의 개인 모바일 기기를 특정 하위 시스템을 위한 독립적인 주 제어기로 활용하는 방식을 가정해 접근하고자 한다.

3.1.4 개발 플랫폼 선정

본 연구 초기에는 구현을 위해 FlutterFlow와 같은 ‘노코드(No-Code) 플랫폼’을 활용한 접근법이 디자인-엔지니어링 사이의 간극을 줄이고 개발 주기를 단축시킬 것으로 기대해 사용했다.¹⁶⁾ 그러나 자유로운 커스텀 로직 구현과 확장성 및 보안성 측면에 한계가 있어, 최종적으로는 완전한 개발 자유도를 제공하는 Flutter 프레임워크를 채택했다.

3.2 사용자 중심 UI/UX 설계(Figma)

3.2.1 기능 정의 및 정보 구조 설계

차세대 콘셉트 시트의 핵심 기능은 네 개의 독립된 구역(목, 등, 팔, 허벅지)의 냉방 및 난방 온도를 조절하는 것이다. 사용자가 명확히 인지하고 접근할 수 있도록 정보를 설계했다(Table 1).

Table 1

Information list

3.2.2 인터페이스 디자인

시트 별 영역 선택, 온도 조절, 모드 변경 버튼, 프리셋 등 주요 조작 요소들을 화면 하단에 집중적으로 배치했다. 사용자가 스마트폰을 한 손으로도 편리하게 조작할 수 있도록, 일반인의 손가락 닿는 범위를 고려했다. Fig. 5와 같이 와이어프레임으로 레이아웃 설계 후, 최종 디자인을 도출했다.

Fig. 5

Interface design for seat climate control screen

시트 별 영역(Seat zone selection) 은 아이콘으로 시각화해 제어대상과 조작행위 간의 관계를 직관적으로 연결시키고, 인지적 부담을 줄인다. 실제 신체에 적용되는 영역을 이미지로 표현했고, 안드로이드 환경 기준으로 터치영역 표준크기인 48 × 48 dp (Density-independent Pixel)로 적용했다. 아이콘 사이의 간격은 시각적 그루핑, 구조적 일관성을 위해 8 dp로 적용했다. 아이콘은 인지적 부담 감소를 위해 신체 부위 순서인 목, 등, 팔, 허벅지 순으로 배치했고, 사용자는 이를 터치해 제어영역을 선택한다.

온도 조절 방식으로 슬라이더를 선택했다. 이는 연속적 값을 한 번의 제스처로 입력 가능하기에 터치 입력 횟수를 최소화할 수 있고, 시각적 피드백이 용이하므로 화면 직시 시간 및 횟수를 줄일 수 있다. 또한, 중립 위치를 기준으로 좌우 대칭성을 활용하면 냉/난방의 경계를 명확히 구분되게 만들고, 의도하지 않은 모드 변경을 방지했다.

슬라이더의 높이는 명확한 터치 입력을 위해 40 dp로, 슬라이더 버튼의 크기는 드래그 중 정확한 위치 제어를 위해 56 dp로 적용했다. 다중 모드 토글은 자주 사용하는 기능이 아니므로 슬라이더 상단 우측에 분리 배치했다.

온도 변화는 사용자가 현재 상태를 빠르게 파악할 수 있도록 색채적 상징성을 활용해 표현했다. 냉방은 파란색, 난방은 붉은색으로 적용하되, 슬라이더의 좌·우 위치(중립 위치 기준)와 인디케이터 표시로도 냉·난방을 구분할 수 있도록 하여 색에만 의존하지 않게 했다.

온도 단계는 시트 부위의 색상 및 투명도 변화와 인디케이터 도트 수로 표현해, 단계가 올라갈수록 시각적 강도도 증가한다.

3.2.3 와이어프레임, 유저플로우기반 최종 디자인 도출

최종 프로토타입 디자인은 와이어프레임과 유저플로우 디자인을 기반으로 도출했다. 이는 앱 처음 실행 화면부터 제어 조작 화면까지 이르는 전체 사용자 흐름, 화면 전환 효과 및 모든 시각적 객체와 기능에 대한 내용을 포함한다(Fig. 6).

Fig. 6

The final design output has come out from wireframe and user-flow design

3.3 Flutter를 이용한 프론트엔드 구현

3.3.1 개발 환경 및 사용자 흐름

프로토타입은 Dart 프로그래밍 언어와 Flutter 프레임워크로 개발했다. 애플리케이션은 사용자 인터랙션에 따라 UI가 동적으로 변화해야 하므로, 상태(State)를 가지는 위젯 중심 아키텍처를 채택했다.

전체 사용자 흐름은 진입점 함수 main()에서 앱 초기화를 시작으로‘Get Started’버튼이 있는 StartScreen, 차량 시스템과 연결되는 상황을 시각적으로 보여주는 LoadingScreen이 등장한다. 이후 핵심 제어 기능이 담긴 ControlScreen으로 이동한다. LoadingScreen의 경우 시스템이 정상적으로 준비되고 있음을 사용자에게 알리는 것을 목적으로, 기능 작동의 불확실성을 해소하고 시스템에 대한 신뢰를 구축하는 UX적 역할을 수행하고자 했다.

3.3.2 핵심 기능 로직

본 연구의 핵심인 ‘온도 조절’방식에 관한 슬라이드 바 인터랙션은 GestureDetector 위젯으로 구현했다. onHorizontalDragUpdate 콜백 함수는 사용자의 수평 드래그 제스처를 실시간으로 감지해, 드래그 바의 위치를 나타내는 _dragPositions 변수를 갱신한다. 위치값은 함수 _calculateTemperatureStage를 통해 냉/난방(Type)과 1~3단계(Stage)의 구체적인 온도 값으로 변환된다. 사용자의 터치 입력에 따른 온도 단계 결정은 선형 변환 방식을 따른다.

서로 다른 스마트폰 화면 해상도에서도 일관된 입력-출력 관계 유지하고자 슬라이더 범위를 0.0에서 1.0으로 정규화했다. 중립 위치인 0.5를 기준으로 변위(O)를 산출해 냉/난방 모드와 세기를 결정한다.

$\[ O=\left(P_{drag }-0.5\right)\times 10 \]$

(1)

식 (1)에서 P_drag는 사용자의 드래그 위치, O는 변환된 제어 변수이다. 산출된 변위 O를 기반으로 최종 온도 단계와 냉/난방 유형이 결정된다.

변환된 값은 각 구역의 상태를 저장하는 temperatureStages라는 맵(Map) 변수에 저장되며, 모든 상태변화는 StatefulWidget의 setState( ) 메소드 내에서 처리된다(Table 2).

Table 2

System structure 1: Core logic and UI rendering

setState( )가 호출되면 Flutter 프레임워크는 위젯 트리를 재구성해 UI를 갱신하고, 이 과정에서 temperatureStages 값에 따라 아이콘의 색상, 슬라이더의 위치, 시트 위 열분포 이미지 등이 변경되어 사용자에게 피드백을 제공한다(Table 3).

Table 3

System structure 2: UI and state management

단일 구역/다중 구역의 경우, 동시 제어 시 발생할 수 있는 상태 변화 관리를 위해 각 제어 아이콘의 활성화 여부와 함께 온도 단계(temperatureStages), 실제 데이터 값에 맞게 드래그 위치(_dragPositions)를 동기화하는 로직을 설계해 사용자 편의성을 확보했다.

3.3.3 온도 단계별 시각 피드백

사용자에게 제어 결과를 명확히 전달하기 위한 시각적 피드백은 상태 변수와 UI위젯을 연동하는 방식으로 구현했다. 이는 조건부 렌더링 기법을 사용해, temperatureStages 맵에 저장된 값에 따라 UI 요소의 속성이 동적으로 변경하는 방식이다(Fig. 7).

Fig. 7

Screen shows the difference by temperature level

이를 구현하고자 Flutter의 Stack 위젯을 활용해 중첩으로 레이어링하는 기법을 적용했다. 배경이 되는 시트 이미지 위에 반투명한 열화상 이미지를 오버레이(Overlay)하고, 온도 단계 변화에 따라 리소스를 실시간으로 교체하는 방식이다. 내부적으로 _getOverlayImage 함수가 호출되면 현재의 온도 타입(Type)과 단계(Stage)를 조합해 매핑된 이미지 경로를 반환해, 끊김 없는 시각적 피드백을 제공한다. 예를 들어, 특정 영역의 온도 상태가 난방이면 해당 아이콘과 슬라이더, 적용 영역은 붉은색으로, 냉방이면 파란색으로 표시했다. 이때 슬라이더 핸들의 위치(중립 기준 좌·우)로도 냉·난방이 구분되도록 했다. 또한, 온도 단계에 따라 색상의 채도 및 투명도와 인디케이터 도트 수를 다르게 표시해 현재 공조 상태를 더욱 직관적이게 보여준다.

3.3.4 단일 제어 및 다중 제어 모드

본 프로토타입은‘단일 제어 모드(Single mode)’와 ‘다중 제어 모드(Multiple mode)’두 가지 인터랙션 방식을 제공한다.

단일 제어 모드는 특정 신체 부위를 정밀하게 조절할 때 사용된다. 이 모드에서는 사용자가 하나의 아이콘을 선택하면 기존에 선택된 다른 아이콘은 자동으로 비활성화되는 배타적 선택(Mutually Exclusive Selection) 로직을 적용했다. 이를 통해 사용자는 현재 조절 중인 대상이 무엇인지 명확히 인지할 수 있으며, 오조작을 방지할 수 있다(Fig. 8).

Fig. 8

In single mode, only one area can be selected

다중 제어 모드는 ‘MULTIPLE’토글 버튼을 통해 활성화시킬 수 있다(Fig. 9). 이 모드에서는 사용자가 원하는 여러 구역을 자유롭게 다중 선택할 수 있다. 이 모드의 핵심은 상태 동기화(State synchronization) 기능이다. 다중 모드에서 슬라이더를 조작하면, 시스템은 현재 활성화된 모든 구역의 인덱스를 순회하며 _sharedDragPosition 변수 값을 일괄 적용(Batch update)한다. 결과적으로 사용자는 한 번의 드래그 제스처만으로 목, 등, 팔, 허벅지인 여러 부위의 온도를 동시에, 동일 단계로 제어할 수 있어 조작 효율성이 증가한다.

3.3.5 프리셋 기능

프리셋 기능은 사전에 정의된 공조 패턴을 즉시 불러오는 기능이다(Fig. 10). 각 프리셋 데이터는 구역별 제어 변수(Type, Stage)를 포함하는 객체 배열 형태로 구조화되어 있다. 사용자가 프리셋을 활성화하면 _loadPreset 함수가 해당 데이터 구조를 순회하며 전체 제어기의 상태(State)를 일괄 갱신한다. 프리셋 구성을 위한 데이터 모델은 Table 4과 같다.

Table 4

Data structure for preset configuration

4. 결 론

본 연구는 자율주행 시대의 차량 환경 변화에 따라 등장한 시트 기반 국부 근접 냉난방 공조 시스템을 제어하기 위한 아이디어를 도출하는 시도에서 출발했다. 이에 대한 한 가지 방안으로, 모든 탑승자가 접근 가능한 개인 모바일 기기를 활용하는 애플리케이션 인터페이스를 제안하고, 실제 구동 가능한 기능적 프로토타입을 개발했다. 이 연구는 앱 디자이너가 단순히 UI/UX 디자인 시안을 제시하는 데 머무르지 않고, Figma 설계를 기반으로 Flutter 프레임워크를 사용해 핵심 제어 로직을 포함한 프론트엔드 프로토타입 개발을 했다는 점에 있다.

이 과정을 통해, 추상적인 디자인 아이디어를 실제 구현 가능한 기술적 결과물로 구체화했고, 디자이너와 앱 개발자 사이에 존재하던 아이디어와 실제 구현 사이의 간극을 줄이는 효율적인 개발 워크플로우의 예시를 제시했다. 결과적으로 본 연구는 차세대 차량 공조 시스템이 마주한 HMI 방식에서 애플리케이션을 활용한 방안을 제안하고자 했다. 본 연구의 핵심 시스템은 추후 시트내 조작계에도 적용 가능할 것으로 보인다.

그러나 위 프로토타입은 프론트엔드 구현에 집중되어 있어, 실제 차량 공조장치와의 연동은 이뤄지지 않았기에 사용성 평가를 통한 객관적 데이터를 확보하지 못했다는 한계점이 있다. 추후 운전 중 사용성과 같은 PX 관련 후속 연구가 필요하다.

Acknowledgments

이 연구는 2024년과 2025년도 정부(산업통상자원부)의 재원으로 한국산업기술진흥원의 지원을 받아 수행된 연구임 (1415178801, 2024년 시장자립형 3세대 xEV산업 육성 사업. RS-2025-02263062, 2025년 산업혁신인재성장 지원사업).

References

• J. Kwon and D. Ju, “Design Strategies for Future Mobility Spaces to Enhance Thermal Comfort for Passengers,” KSAE Spring Conference Proceedings, pp.1114-1115, 2024.
• S. S. Jose and R. K. Chidambaram, “Electric Vehicle Air Conditioning System and Its Optimization for Extended Range—A Review,” World Electric Vehicle Journal, Vol.13, pp.204:1-204:41, 2022. [https://doi.org/10.3390/wevj13110204]
• M. Fojtlín, J. Fišer, J. Pokorný, A. Povalač, T. Urbanec and M. Jícha, “An Innovative HVAC Control System: Implementation and Testing in a Vehicular Cabin,” Journal of Thermal Biology, Vol.70, pp.64-68, 2017. [https://doi.org/10.1016/j.jtherbio.2017.04.002]
• F. F. Hernández, J. M. Peña Suárez, J. A. Bandera Cantalejo and M. C. González Muriano, “Impact of Zoning Heating and Air Conditioning Control Systems on User Comfort and Energy Efficiency in Residential Buildings,” Energy Conversion and Management, Vol.267, Paper No.115954, 2022. [https://doi.org/10.1016/j.enconman.2022.115954]
• M. Choi, M. F. B. Suhaimi, R. A. Rajagukguk and H. Lee, “Impact of Solar Radiation on Vehicle Cabin Temperature During Summer,” KSAE Spring Conference Proceedings, pp.1814-1815, 2025.
• D. Lee, T. Park, S. Chung, C. Jeong and Y. Wang, “Experimental Study of Cooling and Heating Performance of HVAC Connected Climate Control Seats,” KSAE Spring Conference Proceedings, pp.315-321, 2015.
• J. Heo, S. Kang, J. Choi, J. Park, J. Bae and H. Kim, “Development of High-Efficient HVAC System to Increase Fuel Efficiency of a Green Car,” KSAE Spring Conference Proceedings, pp.413-418, 2016.
• K. Lim, J. Park, C. Chun, S. Kim and S. Seo, “Optimal Local Heat Loss and Equivalent Temperature for Thermal Comfort of Passengers,” KSAE Annual Conference Proceedings, pp.2767-2768, 2024.
• S. Kim, S. Jeong, J. Yoon, S. isher, M. Oh, S. Chung, H. Yang and H. S. Lee, “A Design Approach on the Heat Management System for the Future Generation Automotive's Cabin,” KSAE Spring Conference Proceedings, pp.2309-2314, 2022
• M. Choi, S. Jeong, S. J. Kim, M. Oh, S. Chung, H. Yang and H. S. Lee, “Development of an Integrated Heating and Cooling Seat Concept for Future Automotive Thermal Management,” KSAE Annual Conference Proceedings, pp.1891-1895, 2023.
• S. J. Kim, M. Choi, M. J. Sung, Y. Jin, S. K. Go, H. Lee, S. Chung, J. A. Self and H. S. Lee, “Design Approach for Thermal Comfort in Future Mobility: Development of an Integrated Heating and Cooling Seat Concept,” KSAE Annual Conference Proceedings, pp.2751-2758, 2024.
• S. H. Yoon, J. W. Seo, Y. H. Choi, B. H. Song and Y. S. Kim, “A Numerical Study to Evaluate Thermal Comfort According to Consideration of Air-Vents of HVAC Systems in an Automotive Cabin,” KSAE Annual Conference Proceedings, pp.152-158, 2013.
• Y. H. Kim, Y. C. Shin and H. H. Cho, “Experimental Study on Driver Thermal Comfort Based on Mean Skin Temperature During Cooling Mode of an Automobile HVAC System in Summer,” SAREK Winter Annual Conference, pp.409-411, 2019.
• D. Lee, C. Cho, S. Lee and S. Park, “Development of Algorithms for Indoor Temperature Prediction for xEV Vehicles Using Deep Learning,” KSAE Spring Conference Proceedings, pp.1071-1073, 2023.
• S. Nam, B. Lee and K. Han, “Development of Electrified Vehicle Simulator with Integrated HVAC System,” KSAE Spring Conference Proceedings, p.283, 2023.
• Y. Won, M. Choi and H. S. Lee, “UI App Design for a Car Seat-Based HVAC Control: A Study on No-Code Platform Utilization,” KSAE Annual Conference Proceedings, pp.2588-2591, 2024.
• T. Bäuml, D. Dvorak, A. Frohner and D. Simic, “Simulation and Measurement of an Energy Efficient Infrared Radiation Heating of a Full Electric Vehicle,” 2014 IEEE Vehicle Power and Propulsion Conference (VPPC), pp.1-6, 2014. [https://doi.org/10.1109/VPPC.2014.7007129]
• S. Yoon, G. Gopi and M. Fakhrulrezza, “Measurement and Prediction of Thermal Comfort of Occupants in Electric Vehicle Under Dynamic Local Radiant Heating Conditions,” Transactions of KSAE, Vol.31, No.7, pp.479-491, 2023. [https://doi.org/10.7467/KSAE.2023.31.7.479]
• S. Salter, C. Diels, P. Herriotts, S. Kanarachos and D. Thake, “Motion Sickness in Automated Vehicles with Forward and Rearward Facing Seating Orientations,” Applied Ergonomics, Vol.78, pp.54-61, 2019. [https://doi.org/10.1016/j.apergo.2019.02.001]