UI 디자이너가 만든 기획서로 카지노 쿠폰 지향 모델링하기

어떻게 하면 모델링을 잘할 수 있을까?

개발자들과 이야기를 하다 보면 OOP라는 사고의 틀이 그들의 프로그래밍 경험과 강하게 결합하여 제한적인 범위에서만 생각을 펼치는 현상을 발견합니다. 가령 시스템 전체를 카지노 쿠폰로 보라거나 지난 글처럼 사건도 카지노 쿠폰로 만들 수 있다고 하면 흔히 두 가지로 반응합니다. 다행히 '아주 신선한 생각'이라고 느끼는 분들이 있고, 그와 달리 '무슨 말인지 모호한 말'로 여기거나 가치 없는 말로 여기기도 합니다.

UI 디자이너가 만든 기획서를 카지노 쿠폰 지향으로 모델링하기

저는 그런 장벽을 걷어서 그들에게 더 넓은 사고의 공간 혹은 생각의 자유를 느끼게 해 주고 싶다는 욕심으로 지금과 같은 연재 글을 쓰는 일이 잦았습니다. 그런데 이번에는 UI 디자인 결과를 두고도 비슷한 시도를 해 볼 수 있겠다는 충동을 느끼는 순간입니다.

UI 요소 중에서 화면 객체와 메뉴 객체를 식별하기

먼저 화면 객체를 뽑았습니다.[1]

옛날 습관이 떠올라Boundary 스테레오 타입을 붙여 주고 싶은데 아쉽게도 Plant UML에서 지원해 주지 않네요. 그렇다면, <<화면으로 스테레오 타입을 붙여 주고 클래스보다는 인터페이스에 가까우니 카지노 쿠폰 유형으로 (I)가 나오게 합니다.

뒤이어 기획서에 보이는 메뉴를 객체로 식별한 후에 적절하게 이름을 붙여줍니다.

상속과 포함관계로 카지노 쿠폰들을 묶기

앞서 도출한 세 개의 객체, 다시 말해서 세 개의 화면에 모두 하단 고정 메뉴가 포함되어 있습니다. 그걸 UML로 먼저 표현합니다.[2] 그런데 화면이 늘어날수록 포함관계를 나타내는 선이 자꾸 늘어날 테니 상속 관계를 만들어 포함관계를 상위 클래스인 화면(page)에만 두고 상속받는다고 정의합니다.[3]

그런데 기획서를 다시 봅니다. 메뉴를 통해 세 개의 화면으로 이동할 수 있으니 UML 개념으로 말하면 연관(聯關)이 필요합니다. 연관을 표시한 후에 관계 이름으로 render라고 우선 작명을 합니다. 아주 마음에 들지는 않지만, 나중에 개선할 생각을 하며 메모하듯 표기합니다. 그리고, 도식이 너무 복잡해지니 상속관계는 별도 그림으로 구분해서 표현합니다.

카지노 쿠폰 지향의 기본적인 상호작용인 메소드 호출

그리고 메뉴에서 객체의 메시지를 호출할 수 있도록 모든 화면 객체에 render 메소드(혹은 함수)를 정의합니다. 카지노 쿠폰 지향에서 모든 카지노 쿠폰의 상호작용은 기본적으로 메소드 호출로 이뤄집니다. 호출은 동적인 개념이고 클래스도는 정적인 구성만 표현할 수 있습니다. 그래서, 호출을 위해서는 해당 메소드가 정의되어 있어야 하고, 호출을 위한 링크가 있어야 합니다. 그 링크를 위해 앞서 연관 관계를 언급하고 클래스도에 추가했습니다.

아직 초기 기획서인 탓에 하나만 빼고 다 표현했습니다. 다른 화면에는 없는데, 브랜드 센터 화면에서는 상품 태그 추가 팝업이 있습니다.

모델을 그리기 전에 '생각의 종이'부터 준비하세요

여기서 고민이 생깁니다. 전에 동료에게 조언한 내용을 썼던 <모델을 그리기 전에 '생각의 종이'부터 준비하세요를 떠올려 봅니다. '생각의 종이'라는 이름을 붙여 은유했는데, 내용을 풀어 보면 구체적인 모델링 전에 몇 가지를 정해 두라는 것이죠.

그림에 담을 범위(이번 설계 범위)를 정하기

요소를 배치할 레이이웃 정하기

과거 경험때문에 자동적으로 ECB 패턴이 떠오르지만, 여기서는 그중에 Entity 정도만 담기로 합니다. 즉, 입출력 정보를 카지노 쿠폰 수준에서 나타내는 것으로 마치기로 합니다. 참고로 ECB 패턴에 대해서는 퍼플렉시티에게 질문을 던져 받은내용만 인용하고 다음에 별도의 글에서 다루기로 합니다.

화면 카지노 쿠폰에서 도출하는 엔티티 카지노 쿠폰

다시, 클래스도로 돌아오면 인터페이스에서 입출력하는 엔티티를 식별합니다. 이들이 결국 데이터베이스에서 관리하는 정보체로 발전하거나 JSON 형태로 유통되는 데이터를 나타내는 개념이자 단위가 됩니다.

주석

[1] Plant UML로 작성하였고, 입력 내용은 다음과 같습니다.

@startuml
interface home as "홈"
interface brand_center as "브랜드 센터"
interface likes as "내 좋아요 목록"
@enduml

[2] Plant UML로 작성하였고, 입력 내용은 다음과 같습니다.

@startuml
interface 하단고정메뉴 <<메뉴
interface home as "홈" <<화면
home *-- 하단고정메뉴
interface brand_center as "브랜드 센터" <<화면
brand_center *-- 하단고정메뉴
interface likes as "내 좋아요 목록" <<화면
likes *-- 하단고정메뉴
@enduml

[3] Plant UML로 작성하였고, 입력 내용은 다음과 같습니다.

@startuml
interface page <<화면
interface 하단고정메뉴 <<메뉴
page *-- 하단고정메뉴
interface home as "홈" <<화면
page <|-- home
interface brand_center as "브랜드 센터" <<화면
page <|-- brand_center
interface likes as "내 좋아요 목록" <<화면
page <|-- likes
@enduml