책을 읽다가 객체지향 UI의 개념 정리를 위해 여기에 적는다.

앞의 블로그글에서 UI는 오브젝트를 중심으로 구성해 나가는게 객체지향UI라고 설명을 하였다.

오브젝트 모델은 아래와 같이 표기를 하도록 한다.

flowchart LR a[오브젝트
ーーーー
속성1
속성2]

뭔가 클래스 다이어그램의 느낌이 나지 않는가? 여기에 오브젝트에서 발생하는 태스크까지 표기하려면 아래와 같이 하면 된다.

flowchart LR a[오브젝트
ーーーーーーー
속성1
속성2
ーーーーーーー
태스크1
태스크2]

예시를 위해 공원 검색 시스템을 한번 생각해 보도록 하겠다.

먼저 오브젝트를 추출해야 하는데 이는 태스크(사용자의 요구사항에 해당할 것 같다)에서 추출을 한다.

stateDiagram-v2 스미레공원의
미끄럼틀을
설치장소를_확인한다 그네가있는
공원을_확인한다 공원의주소를
확인한다 미끄럼틀의
특징을_확인한다

여기에서 오브젝트를 추출을 해 보면

  • 공원 놀이 시설
  • 공원
  • 시설의 종류

정도로 될 수 있겠다. 이들 간의 관계도는

flowchart LR a[공원
ーーーーーーー
이름
주소] b[공원놀이시설
ーーーーーーー
이름
설치장소] c[시설의 종류
ーーーーーーー
이름
특징] a --x b --x c c x--x a

※ x표가 있는 사이드는 복수개가 올 수 있음을 의미함.

앞에서 오브젝트는 우선 컬렉션과 싱글 페이지로 나누어 본다고 했다. 위 3개의 오브젝트들도 각각 컬렉션 및 싱글 페이지로 오브젝트만으로 호출관계를 정리해 보자

flowchart LR a[컬렉션*
ーーーーーーー
공원] b[싱글페이지
ーーーーーーー
공원] c[컬렉션
ーーーーーーー
공원놀이시설] d[컬렉션*
ーーーーーーー
시설의종류] e[싱글페이지
ーーーーーーー
공원] subgraph 공원 a --> b --> c end subgraph 시설 d --> e --> a end

관계도에서 1:n 인 경우 n이 컬렉션이 되며 1은 싱글 페이지가 됨을 일 수 있다. 그리고 * 표시는 오브젝트 관계중 최상위 위치를 나타낸다. (메뉴나 내비게이션 바에서는 이 항목들이 우선 배치될 것이다. 물론 이는 상황에 따라 달라진다)

공원 놀이 시설의 경우는 컬렉션만 상정을 했다. 공원놀이시설은 “시설의 종류”에서 싱글 페이지로 볼 수 있기 때문이다. 굳이 연결을 한다면 시설의 종류의 싱글 페이지로 연결을 해 줄수도 있을 것 같다.

아래는 공원 컬렉션 뷰이다. 타일 형태로 리스트를 만들었다.

image-20211001101443416

공원 싱글 페이지이다. 싱글 페이지에서는 사진이 있고 공원놀이시설의 컬렉션이 보인다.

image-20211001101625229

시설물 컬렉션이다. (공원과는 아직 관계가 없는 단계)

image-20211001101913814

시설물 싱글 페이지이다. 해당 시설물의 특징과 설치되어 있는 공원의 목록(컬렉션)이 보인다.

image-20211001102014528

※ 세부 내용은 곧 번역서가 출판될 예정이니 참조하기 바란다.