이미지
이미지의 정의
“이미지”는 화면/컴포넌트에서 사용하는 이미지를 의미하며,
아래의 기능을 제공합니다.
이미지는 이미지 파일 이름으로 등록/관리됨
이미지는 등록 과정을 통해 프로젝트 루트 디렉토리 또는 하위 디렉토리에 저장됨
이미지는 이미지
URL(디렉토리 경로(“/“부터 시작) + 이미지 파일 이름)로 구분됨
이미지의 등록/배포/로딩/설정은 이미지 URL을 기준으로 동작함
이미지는 PNG/GIF/JPG와 같이 WEB 환경에서 지원가능한 이미지 유형만 사용가능
이미지 파일 명명규칙
이미지 파일명은 아래와 같은 명명 규칙으로 설정하는 것을 권고한다.
이미지 파일명 “영문자”/“숫자” 문자로 구성하는 것이 호환성이 좋음
상황별 이미지 파일명은 “이미지 파일 역할” + “_” + “normal/focus/down/hover/disable”등을 붙이는 것을 권고
이미지 파일명에 “공백” 문자는 포함할 수 없음
이미지 등록
이미지를 등록하는 방법은 아래와 같다.
이미지 등록전에 “프로젝트”창의 “화면” 탭의 화면 트리에 저장 대상 디렉토리 확인 및 필요시 생성
“리소스→이미지 등록” 메뉴 또는 툴바 “이미지 등록” 버튼 클릭
이미지 등록창에서 이미지 선택 및 저장 경로 지정후 저장
“프로젝트”창의 “이미지” 탭의 이미지 트리에 생성된 이미지 파일 확인
이미지 관리
등록된 이미지는 아래와 같이 관리한다.
“리소스→이미지 등록” 메뉴 또는 툴바 “이미지 등록” 버튼 클릭
이미지 등록 창에서 삭제 대상 이미지 선택 및 “삭제”, “모두 삭제” 버튼 클릭
“프로젝트”창의 “이미지” 탭의 이미지 트리에 삭제된 이미지 파일명 확인
이미지 사용
등록된 이미지는 화면/컴포넌트의 image 관련 속성을 통해서 사용한다.
화면/컴포넌트 image 관련 속성 팝업창 버튼 클릭하여 이미지 설정
화면/컴포넌트 image 관련 속성 값에 이미지
URL 값 설정
참고: 이미지 파일의 투명 처리된 영역은 개발툴에서는 투명으로 보이지는 않음
“프로젝트”창의 “이미지” 탭의 이미지 트리에 이미지를 드래그하여 화면 캔버스에 드랍시 이미지 컴포넌트가 생성됨
이미지 파일 위치
등록된 이미지는 아래와 같이 이 디렉토리 하위에 화면 저장 디렉토리 경로에 저장된다.
루트 디렉토리 하위에 “AAA” 디렉토리를 생성하고, “BBB.png”란 이미지 저장시
해당 파일의 실제 위치는 아래와 같다.